webpack的配置汇总
配置打包的入口与出口
1. 默认约定webpack 的 4.x 版本中默认约定
- 打包的 入口文件为 src -> index.js
- 打包的 输出文件为 dist -> main.js
2. 修改 修改打包的入口与出口，可以在 webpack.config.js 中新增加如下配置信息
const path = require('path') // 导入 node.js 中专门操作路径的模块 path
module.exports = {
entry: path.join(_dirname,'./src/index.js'),//打包入口文件的路径
output: {
path: path.join(__dirname,'./dist'), // 输出文件的存放路径
filename: 'bundle.js' //输出文件的名称
}
}
3. 在终端中运行如下命令，测试 打包 入口与出口是否更改
npm run dev
打包完成之后，会在 dist 文件夹里面 会自动生成 bundle.js ,然后 再回到 src -> index.html 中，重新引入 打包之后的 bundle.js 文件，运行 index.html，依然可以照常运行。
但是此时我们会发现，每次 js 更改之后我们都需要重新手动打包，那要怎么样才能是实现自动打包的功能呢？请继续往下看
配置自动打包
1. 在终端中运行如下命令，安装支持项目自动打包的工具
npm install webpack-dev-server -D
2. 修改 package.json 文件中 scripts 对象的 dev 命令,如下配置：
// package.json 中的配置
"scripts": {
"dev": "webpack-dev-server" // script 节点下的脚本，可以通过 npm run 执行
},
3. 将 src -> index.html 中，scripts 脚本的引用路径 ，修改为根目录下的 buldle.js
<script src="/bundle.js"></script>
4. 运行 如下命令，重新运行打包
npm run dev
5. 复制终端中的http:localhost:8080 地址，然后在在浏览器中访问就可看到打包之后的项目。
注意：
- webpack-dev-server 会启动一个实时打包的 http 服务器
- webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的，看不到的
6. 此时项目的运行需要我们在浏览器手动输入地址才可以访问，那我要想项目启动之后自动弹开浏览器要怎么配置呢？
需要我们修改 package.json 文件中 scripts 对象的 dev 的相关参数，具体修改如下：
// package.json 中的配置
// --open 打包完成后自动打开浏览器页面 --host 配置 IP地址 --port 配置端口
"scripts": {
"dev": "webpack-dev-server --open --host 127.0.0.0 --port 8888"
}
修改之后重新运行 npm run dev 命令进行打包会发现项目自动弹出浏览器，说明我们已经配置成功了～
但是此时我们会发现项目虽然正常运行，没有报错，但却不是我们想要的页面。
那要怎样才可以直接预览到我们想要的页面呢？请继续往下看
配置预览页面
1. 在终端中运行如下命令，安装生成预览页面的插件
npm install html-webpack-plugin -D
2. 修改 webpack.config.js 文件头部区域,添加如下配置信息：
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({//创建插件的实例对象
template: './src/index.html',// 指定要用到的模版文件
filename: 'index.html'//指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})
3. 修改 webpack.config.js 文件中向外暴露的配置对象 ，新增如下配置节点：
module.exports = {
plugins: [ htmlPlugin ] //plugin 数组是 webpack 打 包期间会用到的一些插件列表
}
4. 此时再 运行 如下命令，重新运行打包
npm run dev
5. 在浏览器中 继续访问 http:localhost:8080 地址，既可以看到我们想要的页面。
注意：
- webpack-dev-server 会启动一个实时打包的 http 服务器
- webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的，看不到的
