项目结构
webpackAddBrowserPrefix
│ package-lock.json
│ package.json
│ postcss.config.js
│ webpack.config.js
└─src
index.css
index.js
index.css
安装依赖
在webpackAddBrowserPrefix目录下运行
npm i webpack webpack-cli html-webpack-plugin css-loader mini-css-extract-plugin postcss-loader autoprefixer --save-dev
webpack配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-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']
}
]
},
plugins:[new HtmlWebpackPlugin(),new MiniCssExtractPlugin({filename:"[name].css"})]
}
postcss.config.js
module.exports = {
plugins:[require('autoprefixer')]
}
index.css
编译前
body{
/* 需要添加前缀的样式 */
user-select:none;
}
/* 其他样式 */
编译后
body{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 其他样式 */
打包命令
- 方式一:在webpackAddBrowserPrefix目录下运行
webpack --config ./webapck.config.js
- 方式二:在package.json文件的scripts属性新增如下命令
{
...
"scripts":{
"build":"webpack --config ./webpack.config.js"
}
...
}
修改保存后,在webpackAddBrowserPrefix目录下运行如下命令:
npm run build
打包后的目录
webpackAddBrowserPrefix
│ package-lock.json
│ package.json
│ postcss.config.js
│ webpack.config.js
├─dist
│ index.build.js
│ index.html
│ index.css
└─src
index.css
index.js