webpack学习---使用webpack打包样式资源

打包样式(css/less..)资源 (在webpack.config.js中的module设置)  其rules中需要的模块需要npm下载

                module: {
                    rules: [
                    // 详细loader配置
                    // 不同文件必须配置不同loader处理
                    //处理css资源
                    {
                        // 匹配哪些文件
                        test: /\.css$/,
                        // 使用哪些loader进行处理
                        use: [
                        // use数组中loader执行顺序：从右到左，从下到上 依次执行
                        // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                        'style-loader',
                        // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                        'css-loader'
                        ]
                    },
                    {  
                        //处理less文件
                        test: /\.less$/,
                        use: [
                        'style-loader',
                        'css-loader',
                        // 将less文件编译成css文件
                        // 需要下载 less-loader和less
                        'less-loader'
                        ]
                    }
                    ]
                }