安装webpack
执行如下命令
npm install webpack webpack-cli配置webpack
项目根目录中创建 webpack.config.js 配置文件：
- 配置入口entry(所需打包的文件路径)
- 配置出口output
(1)path指文件打包后的存放路径
(2)path.resolve()方法将路径或路径片段的序列处理成绝对路径
(3)__dirname 表示当前文件所在的目录的绝对路径
(4)filename是打包后文件的名称
配置webpack-dev-server
安装webpack-dev-server
npm install --save-dev webpack-dev-server配置webpack.config.js文件
devServer:{undefined
contentBase:'./build, //设置服务器访问的基本目录
host:'localhost', //服务器的ip地址
port:8080, //端口
open:true //自动打开页面
}安装loader
安装style-loader和css-loader
npm install style-loader css-loader --save-dev配置loader
在webpack.config.js文件里配置module中的rules
在 webpack 的配置中 loader 有两个：
test 属性:用于标识出应该被对应的 loader 进行转换的某个或某些文件。use 属性:表示进行转换时，使用哪个 loader。
自动清理 dist 目录下的旧文件
安装 clean-webpack-plugin 插件
npm install clean-webpack-plugin@3.0.0 -D在 webpack.config.js 文件中进行配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [htmlPlugin, new CleanWebpackPlugin()]抽离和压缩CSS
在多数环境下压缩CSS可以在生产环境中节省加载时间，同时可以将css文件抽离成一个单独的文件
需要在终端输入npm install mini-css-extract --save-dev
//在webpack.config.js进行配置
rules:[{
test:/\.css$/i,
use:['MiniCssExtractPlugin.loader','css-loader']
}]可以自己设定文件名，如下所示
new MiniCssExtractPlugin({
filename:'styles/[contenthash].css'
})对图片进行打包
（把图片生成到 image 目录）
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项指定图片文件的输出路径：
{
test: /\.jpg|png|gif$/,
use: {
loader: 'url-loader',
options: {
limit: 23333,
outputPath: 'image' // 指明生成的图片存到 dist 目录下的 image 子目录中
}
}
}
