webpack踩坑记

发表于   |  

TypeError: __webpack_require__(...) is not a function

错误出现场景

项目使用到了 webpack-dev-server , 启用了热更新和自动刷新的功能，当改变 js 文件后，webpack 能自动重新编译，并且浏览器也会自动刷新，但是当改变 css 文件后就会出现 TypeError: __webpack_require__(...) is not a function 这个问题

问题产生的原因

webpack 升级到 3.0 以后，插件 extract-text-webpack-plugin 的配置发生了变化

解决方法

对 extract-text-webpack-plugin 添加 allChunks 属性为 true 

1
2
3
4
5
6
7
8
9
10
11
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  ...
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true  // 添加属性
    }),
  ],
  ...
}