webpack 2.x 配置

以下展示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

上一篇:EF配置文件初始化数据库 codefirst


下一篇:26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单