【xinsir】webpack进阶实践之错误记录

1.loader的使用改变：

module: {
        rules: [
            {
              test: /\.css$/,
              use: ExtractTextPlugin.extract({
                fallback: "style-loader", 
                use: "css-loader" 
              })
            }
        ]
    }

 

这是之前的配置规则，但是在webpack 4.x版本就已经不支持这样了（不向前兼容）

更改：

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  {
                    loader: require.resolve('style-loader')
                  },
                  {
                    loader: require.resolve('css-loader')
                  }
                ]
              }
            ]
     }

2.在打包的时候报错：

Tapable.plugin is deprecated. Use new API on `.hooks` instead

原因： extract-text-webpack-plugin目前版本不支持webpack4

解决方案：使用extract-text-webpack-plugin的最新的beta版

ps:注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其妙的 bug。好像有一种file-load可以单独打包css，到时候研究下

npm install --save-dev extract-text-webpack-plugin@next

 

3.loader的坑

ps: loader方法必须跟'css-loader放在一起，否则报错'

var minicss = require("mini-css-extract-plugin");

...

{
    loader: minicss.loader,
},
{
    loader: require.resolve('css-loader')
}