webpack之样式

安装css-loader和style-loader
yarn add css-loader style-loader -D

使用：在webpack.config.js插入以下内容

  module: {
    // 模块
    rules: [
      // 规则 css-loader
      // css-loader是为了使用import这种语法
      // style-loader 是把css插入到head标签中
      // loader加载默认是从右向左
      {
        test: /\.css$/, //use:['style-loader','css-loader']
        use: [
          {
            loader: "style-loader",
            options: {
              insert: "top"
            }
          },
          "css-loader"
        ]
      }

要是使用less的话就插入以下内容

 //   处理less文件，匹配规则
      {
        test: /\.less$/, //use:['style-loader','css-loader']
        use: [
          {
            loader: "style-loader",
            // options: {
            //   insert: 'top'
            // }
          },
          "css-loader",//@import语法，解析路径
          "less-loader" //把less-->css
        ]
      }

css文件抽离压缩处理

抽离css的插件
yarn add mini-css-extract-plugin -D

使用
let MiniCssExtractPulugin = require('mini-css-extract-plugin')

样式添加浏览器前缀,解决办法：
yarn add postcss-loader autoprefixer -D

module.exports={
    plugins:[require('autoprefixer')]
}