webpack之Postcss与css模块

webpack之Postcss与css模块

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 mode: 'development',
 entry: './src/app.js',
 pugins: [
  new HtmlWebpackPlugin().
 ],
 
 module: {
  rules: [
   {
    test: '/\.css$/',
    use:[
     'style-loader',
     //此配置是开启模块了，也就是每个css文件都是一个模块
     {
      loader:'css-loader',
      options: {
       modules: true
      }
     },
     'postcss-loader'
    ]
   }
  ]
 }
}

在这里解释一下:package.json文件夹中
'browserslist': [
 '> 1%',//应用在全球浏览器的使用量大于1%
 'last 2 versions'//浏览器最新的两个版本
]

npm i postcss-loader -D
npm i autoprefixer -D
npm i postcss-nested -D

在项目的根目录下传创建一个postcss.config.js

module.exports = {
 plugins: [
  require('autoprefixer'),
  require('postcss-nested')
 ]
}