Question

我的webpack.config.js在这里：

var rules = [
    /*
    * Exports HTML as string, require references to static resources.
    * （html loader）
    * */
    {
        test: /\.html$/,
        loader: "html?-minimize"
        // loader: "html?-minimize"
    },


    // /*
    //  * img loader
    //  * */
    {
        test: /\.(png|gif|jpe?g)$/,
        loader: 'url-loader',
        query: {
            /*
            *  limit=10000 ： 10kb
            *  图片大小小于10kb 采用内联的形式，否则输出图片
            * */
            limit: 10000,
            name: '/img/[name]-[hash:8].[ext]'
        }
    },


    /*
    * font loader
    * */
    {
        test: /\.(eot|woff|woff2|ttf|svg)$/,
        loader: 'url-loader',
        query: {
            limit: 5000,
            name: '/font/[name]-[hash:8].[ext]'
        }
    },


    // /*
    //  * Extract css files
    //  * （提取css到单独文件loader）
    //  */
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback:"style-loader", 
            use: "css-loader!postcss-loader",
            publicPath: '../'
        })
    },
];

var config = {
    entry: entry,
    /*
    *  Like resolve but for loaders.
    *  （查找loader 的位置）
    * */
    resolveLoader: {root: path.join(__dirname, "node_modules")},
    output: output,
    module: {
        rules: rules
    },
    resolve: resolve,
    plugins: plugins,
}

我使用webpack-validator检查我的webpack.config.js，登录控制台是：

"module": {
  "rules" [1]: [
    {
      "test": {},
      "loader": "html?-minimize"
    },
    {
      "test": {},
      "loader": "url-loader",
      "query": {
        "limit": 10000,
        "name": "/img/[name]-[hash:8].[ext]"
      }
    },
    {
      "test": {},
      "loader": "url-loader",
      "query": {
        "limit": 5000,
        "name": "/font/[name]-[hash:8].[ext]"
      }
    },
    {
      "test": {},
      "use": [
        {
          "loader": "D:\\webpack\\livelywebpack2\\node_modules\\.2.1.0@extract-text-webpack-plugin\\loader.js",
          "options": {
            "omit": 1,
            "remove": true,
            "publicPath": "../"
          }
        },
        {
          "loader": "style-loader"
        },
        {
          "loader": "css-loader"
        },
        {
          "loader": "postcss-loader"
        }
      ]
    }
  ],
  "loaders" [2]: -- missing --
},

[1]需要“装载机”
[2]“规则”不允许

module.loaders将继续受到支持，但将来它将被弃用而不支持module.rules。我该如何设置此配置？

Answer 1

您对webpack 2的规则应如下所示（我省略了注释）：

var rules = [
    {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
            minimize: true
        }
    },
    {
        test: /\.(png|gif|jpe?g)$/,
        loader: 'url-loader',
        options: {
            limit: 10000,
            name: '/img/[name]-[hash:8].[ext]'
        }
    },
    {
        test: /\.(eot|woff|woff2|ttf|svg)$/,
        loader: 'url-loader',
        options: {
            limit: 5000,
            name: '/font/[name]-[hash:8].[ext]'
        }
    },
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader', 
            use: ['css-loader', 'postcss-loader'],
            publicPath: '../'
        })
    },
];

除module.rules之外，您还需要进行其他更改，因为有一些重大更改。阅读官方Migration Guide，了解您需要更改的内容。

如何在webpack2中设置模块规则？

1 个答案: