安装
webpack打包时,自动配置浏览器前缀,需要用到一个loader(postcss.loader
)和一个插件(autoprefixer
),所以首先需要安装好插件和loader。
npm install postcss-loader -D
npm install autoprefixer@version -D
version为相应的版本号,部分较高版本不起效,亲测7.2.6和7.2.1版本有效,所以建议安装时指定版本号。
配置
安装完成后,在webpack.config.js的同级目录下新建postcss.config.js
文件,并配置插件
module.exports = {
plugins: [
require('autoprefixer')
]
};
在webpack.config.js
文件下,找到module下的rules属性,添加loader配置
const path = require('path')
module.exports = {
mode: "production", /** development*/
entry: {
main: "./src/index.js"
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: {
loader: "url-loader",
options: {
name: '[name]_[hash].[ext]',
outputPath: "static/images",
limit: 10240,
//图片大小限制,若大于该值,则打包搭配dist/static/images下,若小于该值,打包到js文件
}
}
},
{
test: /\.scss$/i,
use: ['style-loader','css-loader','sass-loader','postcss-loader'],
}
]
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, "dist")
}
}
由于loader执行顺序为从右向左,所以use里面的loader顺序不能写反。webpack打包时,首先会调用postcss-loader为浏览器添加厂商前缀,,然后通过sass-loader把sass语法转化为css语法,然后执行css-loader整合css代码,最后执行style-loader,讲整合的css代码添加到style标签中。所以此时需要安装以下loader:
npm i style-loader css-loader sass-loader node-sass -D