D:\project\wx\build\webpack.dev.conf.js:26
new webpack.optimize.OccurenceOrderPlugin(), ^
TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
at Object.(D:\project\wx\build\webpack.dev.conf.js:26:9)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.(D:\project\wx\build\dev-server.js:8:21)
at Module._compile (module.js:652:30)
OccurenceOrderPlugin已经重命名为 OccurrenceOrderPlugin(名称上多了一个r
.),并已经默认启用,因此配置文件中不再需要写,直接删除就是 参考:[https://www.webpackjs.com/guides/migrating/]
D:\project\wx\build\webpack.dev.conf.js:27
new webpack.NoErrorsPlugin(), ^
TypeError: webpack.NoErrorsPlugin is not a constructor
at Object.(D:\project\wx\build\webpack.dev.conf.js:27:9)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.(D:\project\wx\build\dev-server.js:8:21)
at Module._compile (module.js:652:30)
NoErrorsPlugin已经重命名为 NoEmitOnErrorsPlugin 参考:[https://www.webpackjs.com/plugins/no-emit-on-errors-plugin/]
- configuration.resolveLoader has an unknown property 'fallback'. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
-> Options for the resolver when resolving loaders
at webpack (D:\project\wx\node_modules\webpack\lib\webpack.js:31:9)
at Object.<anonymous> (D:\project\wx\build\dev-server.js:16:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
解决:
resolveLoader: {
fallback: [path.join(__dirname, '../node_modules')]
},
改成:
resolveLoader: {
modules: [ 'node_modules' ],
},
参考:https://webpack.js.org/configuration/resolve/#resolveloader
- configuration.resolve.extensions[0] should not be empty.
-> A non-empty string
at webpack (D:\project\wx\node_modules\webpack\lib\webpack.js:31:9)
at Object.<anonymous> (D:\project\wx\build\dev-server.js:16:16)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:188:16)
at bootstrap_node.js:609:3
webpack4要求数组元素不能为空,若为空的话要用 * 来取代
参考:https://webpack.js.org/configuration/resolve/#resolve-extensions
Using this will override the default array, meaning that webpack will no longer try to resolve modules using the default extensions. For modules that are imported with their extension, e.g. import SomeFile from “./somefile.ext”, to be properly resolved, a string containing “*” must be included in the array.
resolve: {
extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
改成:
resolve: {
extensions: ['*','.js', '.vue', '.less', '.css', '.scss'],
.hooks
instead只知道是插件报错了,但不知道是哪个插件报错了,还知道跟webpack的hooks
有关
最后找到是下面这一段代码有问题
compiler.plugin('compilation', function(compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
hotMiddleware.publish({
action: 'reload'
})
cb && cb()
})
})
改成:
compiler.hooks.thisCompilation.tap('compilation', (compilation) => {
compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
hotMiddleware.publish({
action: 'reload'
})
cb && cb()
})
});
参考:https://webpack.js.org/api/compiler-hooks/#thiscompilation
公司新入手的Macbook m1最新款,使用NPM RUN DEV,你都可以去喝杯咖啡再回来,再看还在 build,怎么解决?
如何在VUE项目中添加stylelint,检查css,scss,less的语法问题,保证团队代码的规范统一
默认情况下,webpack-dev-server只可使用localhost或127.0.0.1访问,用局域网IP访问不了
mvvm项目总会有一些静态文件,如静态合同、协议等等,如何通过webpack来原样复制?
webpack最小化打包lodash插件,如果全量打包的话,lodash会非常大
vue2.0 项目,利用webpack搭建mock api服务,用于本地调试数据
webpack打包,报"WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)",记录一下
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle