Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = fun...'
[3] You may need an appropriate loader to handle this file type.
[3] SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = fun...'
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
],
},
Webpack4 升级优化笔记
最近终于有时间实施将公司的前端项目升级到Webpack4 我是从3.6升到4.16 先说一下关于loaders,总体来说基本上全部使用到的loader都升级到最新是没错的。
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = fun...'
[3] You may need an appropriate loader to handle this file type. [3] SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = fun...'
解决办法
虽然Webpack2开始集成了json-loader但是不知道为什么还是出现了这个问题,我这边对于这些json的用法都是在bundle-loader?lazy!中出现的,但是加上这个就解决了。
extract-text-webpack-plugin 和 mini-css-extract-plugin
这个插件原来是帮助将Css从Js中抽取出来的,但是在Webpack4后 有了新的解决方案,不再使用这个插件了 mini-css-extract-plugin 官网的用法都比较清楚,需要注意的是,目前这个mini-css-extract-plugin的loader不能和thread-loader 以及happyloader搭配使用,相关issues
HtmlWebpackPlugin
这个就很简单了 目前要使用@next版本
安装的时候需要
优化
uglifyjs-webpack-plugin
在Webpack中的配置中提供一个minimizer选项,这个选项在production环境下默认是开启的,这样就不用区别对待dev和prod的插件列表了。 这里需要说一下UglifyJsPlugin的parallel 默认是不开启的,这个配置项在Webpack4中才有效,所以这里需要设置一下。
splitChunks
其实默认选项已经比较合理了,但是面对定制化的分包需求就需要进一步设置。
可以看一下这些文章
一步一步的了解webpack4的splitChunk插件 没有了CommonsChunkPlugin,咱拿什么来分包(译) Webpack 4 — Mysterious SplitChunks Plugin
搞清楚chunks的类型很重要
使用webpack-serve代替webpack-dev-server
webpack-serve应该是未来的方向,webpack-dev-server目前应该是处于只维护的状态。
在采用webpack-serve前需要考虑的一点是,由于webpack-serve采取的是websocket,所以不支持旧的浏览器,这点上面是不会改变的,所以如果要采取这个方案需要考虑这点。
在使用webpack-serve的时候发现了一个问题,watch的功能是一个addons,而且官方的例子也是有问题的,这里发一下正确的以及反馈的issues