全文字数： 365
2分钟
webpack4在打包速度上有了明显的提高，比如文件代码的改变通过websock推送通知页面刷新。webpack4可以不要任何的配置文件，即可通过命令完成打包，下面进行简单的介绍。
初始化项目
npm init -y
安装依赖
npm install webapck
npm install webpack-cli
首先需要在当前目录建一个src文件夹，然后在src文件夹中建index.js文件，该文件就是我们的入口文件。开始的准备工作已经完成，下面就可以打包了。
开始打包
npx webpack
除了通过上面的命令，还可以在package.json文件中配置脚本来运行命令，具体方式如下
在package,json中配置
"scripts": {
"build": "webpack --mode development"
},
运行命令
npm run build
在webpack中使用默认的配置进行打包往往满足不了项目的需要，这个时候我们需要自定义自己的配置文件。
建立webpack.config.js文件，开始处理css文件，需要安装style-loader和css-loader模块
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
]
}
}
往往我们处理css还不够，还需要处理html文件，需要安装html-webpack-plugin
const path = require('path')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true
}
})
]
}
《前端精髓》
019月
288月