webpack 打包样式资源

webpack 打包样式资源

webpack.config.js配置文件内容为：

// 用来拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    // webpack 配置

    // 入口起点
    entry : './src/index.js',
    // 输出
    output : {
        // 输出文件名
        filename : 'built.js',
        // 输出路径
        path : resolve(__dirname, 'dist')
    },
    // loader 配置
    module : {
        rules : [
            // 详细 loader 配置
            // 不同文件必须配置不同 loader 处理
            {
                test : /\.css$/, // 匹配哪些文件
                //使用哪些 loader 进行处理
                use: [
                    // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
                    'style-loader', // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
                    'css-loader' // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
                ]
            },
            {
                test : /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'   // 将less文件编译成css文件,需要下载 less-loader 和 less
                ]
            }
        ]
    },
    // plugins 的配置
    plugins : [
        // 详细 plugins 的配置
    ],
    //模式
    mode : 'development', // 生产模式
    // mode : 'production' // 开发模式
}