Wie man Modulregeln in webpack2 einstellt?

Question

meine webpack.config.js ist hier:

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, 
} 

I webpack-Validator verwenden, um meine webpack.config.js zu überprüfen, und die Log-in-Konsole ist:

"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] "Lader" erforderlich
[2] "Regeln" ist nicht erlaubt

module.loaders weiterhin unterstützt, bu werden In der Zukunft wird es zugunsten von module.rules veraltet sein. Wie sollte ich diese Konfiguration richtig einstellen?

Answer 1

Ihre Regeln für webpack 2 wie folgt aussehen sollte (ich weggelassen, um die Kommentare):

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: '../' 
     }) 
    }, 
]; 

Sie andere Änderungen haben werden neben module.rules zu machen, weil es einige Bruch Änderungen sind. Lesen Sie den offiziellen Migration Guide, um zu sehen, was Sie ändern müssen.