配置 css less 打包 和加前缀

// 安装 模板解析
"html-webpack-plugin": "4.0.0-alpha",
npm install html-webpack-plugin -D

----------------
"css-loader": "^3.6.0",
"style-loader": "^2.0.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-loader": "^4.2.0",
"autoprefixer": "^9.8.6",

npm install css-loader style-loader less less-loader autoprefixer postcss-loader -D

// css 需要在 入口的js 中 导入后 才可以使用
require('./index.css')

 

 

 

 

 

 

  module:{

        rules:[

            {

                // 基于 正则匹配处理哪些文件

                test:/\.(css|less)$/i, 

                // 控制器使用的 loader (有顺序的：从右到左编译)

                use:[

                    // 把编译好的 css  插入到 页面的 head 中 （内嵌式）

                    "style-loader",

                    // 编译 @import/url() css 语法 

                    "css-loader", 

                    // 设置前缀

                    "postcss-loader",

                    // 编译 less

                    {

                        loader:"less-loader",

                        options:{

                            importLoaders:1

                        }

                    }  

                ],

            }

        ]

    }

 

 

 

 

 

module.exports = {

    plugins: [

        require('autoprefixer')({

            "browsers": [

                "defaults",

                "not ie < 11",

                "last 2 versions",

                "> 1%",

                "iOS 7",

                "last 3 iOS versions"

            ]

        })

    ]

};