配置webpack.config.js
（一）打包bundle.js文件
不想手动指定入口和出口文件，就需要创建一个配置文件，把需要的配置写在配置文件里面。
项目根目录下新建一个webpack.config.js
1.打包bundle.js的配置
const path=require('path');
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}配置完了之后，在终端输入webpack就会执行配置文件里面的代码，重新打包了bundle.js了。
这样刷新网页就可以看到修改js而产生的效果了。
(二)使用webpack-dev-server工具
1.第一种方式
（1）运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖。
（2）安装完毕后，这个工具的用法和webpack命令的用法完全一样。在终端输入webpack-dev-server(由于webpack-dev-server是在项目安装的没有全局安装，所以，直接在终端输入webpack-dev-server报错了，只有那些安装到全局 -g 的工具，才能在终端中正常执行)
解决方法：在package.json文件中，找到scripts的一个配置项，在里面添加：
“dev”:"webpack-dev-server"
执行npm run dev
(遇到包有问题，删除node_modules文件夹，再在终端执行npm i 重新下载包即可)
注意：webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中，必须安装webpack(cnpm i webpack -D),即使全局安装了也不行，本地也必须安装。
配置完成之后，它会实时监控代码，每次改变它都会监测到。
(3)每次打包编译后自动打开浏览器，增加--open
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open"
}（4）自己选择打开浏览器时使用的端口号(例如选择 3000 的端口号)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000"
}（5）控制打开浏览器的页面，如：让它打开浏览器之后，首先打开的是首页
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000 --contentBase src"
}（因为src下面有一个index.html）
（6）样式异步刷新，启用热更新 --hot
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
}2.配置webpack-dev-server的第二种方式
webpack.config.js文件中
const path=require('path');
//启用热更新第二步
const webpack=require("webpack")
//将main.js打包到bundle.js
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
//配置webpack-dev-server的第二种方式
devServer:{
open:true,//自动打开浏览器
port:3000,//指定端口
contentBase:'src',//指定托管目录
hot:true //启用热更新第一步
},
plugins:[//配置插件的节点
//new 一个热更新的模块对象，这是启用热更新的第三步
new webpack.HotModuleReplacementPlugin()
]
}
（三）使用html-webpack-plugin 插件
(1)本地项目安装html-webpack-plugin插件
npm i html-webpack-plugin -D
(2)在webpack.config.js中导入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
(3)在插件配置中创建插件对象（所有的插件都在plugins里面配置）
plugins:[//启用热更新第三步
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename:'index.html'
})
]
这个插件的两个作用：
1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去
（四）配置处理css样式表的第三方loader
webpack 默认只能打包处理 JS 类型的文件，无法处理其他的非 JS 类型的文件
如果需要处理非 JS 类型的文件，需要安装合适的第三方 loader 加载器
1.如果想要打包处理css文件，需要安装
npm i style-loader css-loader -D
2.在webpack.config.js这个配置文件里面新增一个配置节点，叫做module，它是一个对象，在这个module对象身上，有个rules属性，这个rules属性是个数组，这个数组中，存放了所有第三方文件的匹配和处理规则。
module:{//这个节点用于配置所有第三方模块加载器
rules:[//所有第三方模块的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
]
}
3.配置处理less文件的loader
（1）.安装less
npm i less -D
（2）.安装less-loader
npm i less-loader -D
（3）.配置规则
module:{//这个节点用于配置所有第三方模块加载器
rules:[//所有第三方模块的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
{test:/\.less/,use:['style-loader','css-loader','less-loader']}
]
}
4.配置处理scss文件的loader
（1）. cnpm i node-sass -D（这里用cnpm，因为用npm会安装失败）
（2）. npm i sass-loader -D
（3）.配置规则
module:{//这个节点用于配置所有第三方模块加载器
rules:[//所有第三方模块的匹配规则
{test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
{test:/\.less/,use:['style-loader','css-loader','less-loader']},
{test:/\.scss/,use:['style-loader','css-loader','sass-loader']}
]
