项目结构
webpackAssetsModule
│ package-lock.json
│ package.json
│ postcss.config.js
│ webpack.config.js
├─assets
│ icon.png
│ bg.png
└─src
index.css
index.js
index.css
安装依赖
在webpackAssetsModule目录下运行
npm i webpack webpack-cli html-webpack-plugin css-loader mini-css-extract-plugin postcss-loader autoprefixer optimize-css-assets-webpack-plugin --save-dev
webpack配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exprots = {
mode:'development',
entry:'./src/index.js',
output:{
path:resolve(__dirname,'dist'),
filename:'[name].build.js'
},
module:{
rules:[
{
// 匹配文件规则
test:/\.css$/i,
// 使用的loader
use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
},
{
test:/\.(png|jpg)$/i,
type:"asset",
parser:{
dataUrlCondition:{
maxSize: 4 * 1024
}
}
}
]
},
plugins:[
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin({filename:"[name].css"}),
new OptimizeCssAssetsWebpackPlugin()
]
}
打包命令
- 方式一:在webpackAssetsModule目录下运行
webpack --config ./webapck.config.js
- 方式二:在package.json文件的scripts属性新增如下命令
{
...
"scripts":{
"build":"webpack --config ./webpack.config.js"
}
...
}
修改保存后,在webpackAssetsModule目录下运行如下命令:
npm run build
打包后的目录
webpackAssetsModule
│ package-lock.json
│ package.json
│ postcss.config.js
│ webpack.config.js
├─assets
│ icon.png
│ bg.png
├─dist
│ 5e244cf091baa9141c96.png
│ index.build.js
│ index.html
│ index.css
└─src
index.css
index.js