webpack 2.x 配置

时间：2024-07-01 09:03:56

以下展示2.x 配置文件信息

v1 迁移至 v2 官方有更详细的说明

具体详见 https://webpack.js.org/guides/migrating/

只列举常用到参数进行描述, 或者我在使用中遇到的 也会不定时更新

一些 2.x 的改变

  • module.loaders -> module.rules

    //v1.x module使用loaders来配置加载器
module:{
//加载器配置
loaders: [
    // test 通过正则表达式去匹配不同后缀的文件名
    // loader 选择当前文件要使用的加载器, 如果要使用多个加载器用 ! 连接
    { test: /\.js$/, loader: 'babel-loader?presets[]=es2015' },
    { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
]
},
    //v2.x module中的loaders 替换成了 rules
module:{
//加载器配置
rules: [
    {
        test: /\.js$/,
        use:[
            { loader: 'babel-loader', options: { presets: ['es2015'] }
        ]
    },
    {
        test: /\.less$/,
        // use 第一种写法
        // 使用 use 来管理所使用使用的 多个 loader
        // 不需要再使用 ! 来拼接, 使得更容易区分, 每个 loader 都是一个对象
        use:[
            // 如果需要多个loader
            { loader: 'style-loader'    },
            { loader: 'css-loader', options:{  modules: true }  },
            { loader: 'less-loader'     },
        ],

        // use 第二种写法
        use: [
            "style-loader", "css-loader?modules=true", "less-loader"
        ]
    },
]
},

  • 删除了自动追加 -loader 模块的扩展名

    在写入配置时 -loader 不可省略

    如若还是使用以前的配置, 可以配置 resolveLoader.moduleExtensions 来实现

    但官方并不建议这样使用

    module: {
rules: [
    {
        test: /\.less$/,
        use: [
            "style", "css", "less",
        ]
    }
]
},
resolveLoader: {
moduleExtensions: ["-loader"]
}

  • json-loader is not required anymore

    如果当前配置文件没有为 json 写入配置, webpack会自动尝试加载 json-loader

相关文章