5.Loader打包css文件增加前缀

打包css文件   /sass / less以及

自动添加css样式厂商前缀

1.npm install style-loader css-loader -D

npm installsass-loader node-sass webpack --save-dev

npm install less-loader --save-dev

npm i -D postcss-loader

2.默认配置文件webpack.config.js

const path=reuqire('path');

module.exports={

entry:'./src/index.js',//入口文件

output:{

          filename:'bundle.js',//出口打包文件名

          path:path.resolve(__dirname,'dist')//打包到的目录

        }，

module:{

        rules:[

                 {

                  test:/\.css$/,

                  use:

                    ['style-loader','css-loader ,' postcss-loader']

                   },

                  {

                  test:/\.scss$/,

                  use:

                   ['style-loader', 

                 { loader:'css-loader',

                  options:{

                         importLoaders:2//对于css样式文件中还引入样式文件采用的方式还是从下往上 'postcss-loader','sass-loader','css-loader','style-loader'

,若不加此项，对于样式文件中的引入文件直接走css-loader,style-loader忽略掉'postcss-loader'和'sass-loader '                  }                   

                },

                 'sass-loader'  ,     

                'postcss-loader']

                   },

                {

               test:/\.less$/,

               use:[  'style-loader',                                                                    {loader:css-loader' ,

                       options:{

                               importLoaders:2

                                         }

                                 },                                                                     'less-loader',

               'postcss-loader'

                    ]

         }

}

3.在和webpack.config.js平级处新建一个postcss.config.js文件

同时 npm install  autoprefixer -D

module exports={

      plugin:[ require('autoprefixer')]

}