webpack的配置文件webpack.config.js
在项目根目录下创建webpack.config.js文件
代码及注释如下：
const path = require('path');
//这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露一个 配置对象
module.exports = {
// 在配置文件中，需要手动指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'), //入口，表示 要使用 webpack 打包哪个文件
output: { //输出文件相关的配置
path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' //这是指定 输出的文件的名称
}
}
// 当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1.首先，webpack 发现，我们并没有通过命令的形式，给他指定入口和出口
// 2.webpack 就会去 项目的根目录中，查找一个叫做 'webpack.config.js' 的配置文件
// 3.当找到配置文件后，webpack 会解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件
// 中，导出的配置对象
// 4.当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建
上边的代码是一个最最基本的webpack配置文件，entry:是指定要打包的入口文件，output:指定打包好之后文件的路径和文件名。
（src是我们放我们的源代码的文件夹，dist是我们放我们编译后文件的文件夹），
有了基本的webpack.config.js，我们用webpack来打包就简单了。可以直接执行下边命令：
webpack
webpack默认就会去寻找根目录下的webpack.config.js 文件。
打包成功，dist文件下就会生成一个 bundle.js 。
续：
- 在
webpack.config.js中配置webpack-deev-server参数 - 在
webpack.config.js中配置插件的节点
// 导入处理路径模块
const path = require('path');
// 启用热更新的 第2步
const webpack = require('webpack')
// 导入在内存中生成 HTML 页面的 插件
// 只要是插件，都一定要放到 plugins 节点中去
// 这个插件的两个作用：
// 1. 自动在内存中根据指定页面生成一个内存的页面（ 物理内存中的index.html，中的 script 的src 属性的引用可以注释掉）
// 2. 自动，把打包好的 bundle.js 追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
//这个配置文件，其实就是一个 JS 文件，通过 Node 中的模块操作，向外暴露一个 配置对象
module.exports = {
// 在配置文件中，需要手动指定 入口 和 出口
entry: path.join(__dirname, './src/main.js'), //入口，表示 要使用 webpack 打包哪个文件
output: { //输出文件相关的配置
path: path.join(__dirname, './dist'), //指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' //这是指定 输出的文件的名称
},
devServer: { //这是配置 dev-server 命令参数的第二种形式，相对在package.json中配置来说，这种麻烦
// --open --port 3000 --contentBase src --hot"
open: true, //自动打开浏览器
port: 3000, //设置我们启动时候的运行端口
contentBase: 'src', //指定托管的根目录
hot: true, //启动热更新 的第1步
},
plugins: [ //配置插件的节点
new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，这是启用热更新的第3步
new htmlWebpackPlugin({ //创建一个 在内存中 生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'), //指定 模板页面 。将来会根据 指定 的页面路径，去生成内存中的 页面
filename: 'index.html' //指定生成的页面的名称
})
]
}
// 当我们在控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1.首先，webpack 发现，我们并没有通过命令的形式，给他指定入口和出口
// 2.webpack 就会去 项目的根目录中，查找一个叫做 'webpack.config.js' 的配置文件
// 3.当找到配置文件后，webpack 会解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件
// 中，导出的配置对象
// 4.当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建