webpack 打包样式资源

￡神魔★判官ぃ 2023-01-09 01:10 199阅读 0赞

# 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' // 开发模式
    }