webpack 3 升级 webpack4 个人笔记
参考文章:
1. webpack4升级完全指南
https://segmentfault.com/a/1190000014247030
2. Mobx useStrict is not a function
https://blog.csdn.net/greekmrzzj/article/details/79861787
3. babel-preset-env:你需要的唯一Babel插件
https://segmentfault.com/p/1210000008466178
升级步骤:
1. npm 升级 查看package.json所有包的最新包版本
npm install -g npm-check-updates
ncu -u
package.json文件包的版本会自动升级到最新版本
2. 参考 文章1 修改webpack.config.js
2.1 package.json 的script 可能需要修改
我的script是这样写的 通过env参数判断是开发模式还是build模式
"scripts": {
"start": "webpack-dev-server --env=development --progress --colors",
"build": "webpack --env=production --progress"
},
2.2 webpack.config.js 中 module.exports 增加 mode
由于我的是env参数,所以我的写法是
let config = {
mode: ENV,
entry: {
... export default config;
3 再见commonchunk,你好optimization
webpack3的写法:
plugins: [// new webpack.optimize.CommonsChunkPlugin({
// async: true,
// children: true,
// minChunks: 3
// }),
// new webpack.optimize.CommonsChunkPlugin({
// names: ['vendor', 'manifest']
// }),
webpack4的写法
let config = {
mode: ENV,
...
optimization: {
runtimeChunk: {
name: 'manifest'
},
// minimizer: true, // [new UglifyJsPlugin({...})] //minimizer 必须是数组,在production模式下使用到,见步骤4
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(less|scss|css)$/,
chunks: 'all', // merge all the css chunk to one file
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
},
...
};
4 ExtractTextWebpackPlugin调整,建议选用新的CSS文件提取插件mini-css-extract-plugin
production模式,增加 minimizer
绿色注释掉的是原写法 红色是新写法
// import ExtractTextWebpackPlugin from 'extract-text-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import UglifyJsPlugin from "uglifyjs-webpack-plugin";
import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin"; let config = {
...
plugins: [
...// new ExtractTextWebpackPlugin({
// filename: '[name].[contenthash:8].css',
// allChunks: true
// }),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css'
}),
...
], module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
'css-loader',
{
loader: 'less-loader',
options: {
strictMath: true
}
}
]
// loader: ExtractTextWebpackPlugin.extract({
// use: [
// {
// loader: 'css-loader'
// },
// {
// loader: 'less-loader',
// options: {
// strictMath: true
// }
// }
// ]
// })
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
'css-loader'
]
// loader: ExtractTextWebpackPlugin.extract({
// use: ['css-loader']
// })
},
...
]
},
...
}; switch (ENV) {
case 'production':
config = merge(config, {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
]
},
plugins: [
new CleanWebpackPlugin([TARGET])
]
});
break;
...
} export default config;
5 安装包
npm i
根据package.json文件安装相关包
6 启动服务
npm run start
启动出现的错误
env介绍
https://segmentfault.com/p/1210000008466178
关注一下大佬的 评论区, 我个人还是不能很好理解这个按需加载
https://segmentfault.com/q/1010000013106040
辅助理解一下吧。。。
justjavac 2017年02月24日 发布于前端 www.2ality.com babel-preset-env 是一个新的 preset,可以根据配置的目标运行环境(environment)自动启用需要的 babel 插件。 目前我们写 javascript 代码时,需要使用 N 个 preset,比如:babel-preset-es2015、babel-preset-es2016。es2015 可以把 ES6 代码编译为 ES5,es2016 可以把 ES2016 代码编译为 ES6。babel-preset-latest 可以编译 stage 4 进度的 ECMAScript 代码。 问题是我们几乎每个项目中都使用了非常多的 preset,包括不必要的。例如很多浏览器支持 ES6 的 generator,如果我们使用 babel-preset-es2015 的话,generator 函数就会被编译成 ES5 代码。 babel-preset-env 的工作方式类似 babel-preset-latest,唯一不同的就是 babel-preset-env 会根据配置的 env 只编译那些还不支持的特性。 使用这个插件,你讲再也不需要使用 es20xx presets 了。 配置语法和 Autoprefixer 一样......
.babelrc
// "presets": ["react", "es2015", "stage-0"], "presets": ["react", "env", "stage-0"],
安装 babel-preset-env 包
升级了mobx 3.3.1 为 5.5.1 报 mobx.useStrict(true); 错误 纠正
网上搜索的方案是 enforceActions: true
运行提示是:
Deprecated: Deprecated value for 'enforceActions', use 'false' => '"never"', 'true' => '"observed"', '"strict"' => "'always'" instead
所以修改如下
// mobx.useStrict(true);
mobx.configure({
enforceActions: 'always',
});
webpack 3 升级 webpack4 个人笔记的更多相关文章
- webpack4 自学笔记三(提取公用代码)
全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...
- webpack 4 升级点
webpack 4 升级点: 默认entry为./src,默认output为/dist sideEffects 在webapck2开始支持ESModule后,webpack提出了tree-shakin ...
- webpack4学习笔记(二)
webpack打包各种javascript文件 (本文只是提供一个学习记录,大部分内容来自网络) 一,打包js文件和es6代码 1,webpack命令打包js文件 Tip: 在webpack4.x之前 ...
- webpack3 项目升级 webpack4
由于 vue-cli 2 构建的项目是基于 webpack3,所以只能自己动手改动,至于升级 webpack4之后提升的编译速度以及各种插件自己去体验. 修改配置 1.替换插件 extract-tex ...
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- Webpack4 学习笔记四 暴露全局变量、externals
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...
- Webpack4 学习笔记一初探Webpack
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的 ...
- webpack4.x笔记-配置基本的前端开发环境(一)
webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...
- webpack4学习笔记(一)
webpack4 1,安装webpack npm insatll webpack --save-dev //安装最新版本 npm insatll webpack@<version> --s ...
随机推荐
- c语言----实战植物大战僵尸
1. 原理 通过指针先找到阳光的地址,然后修改地址对应的值即修改阳光值. 2. 工具 CheatEngine --- 查询进程中变量的地址 Dll注入工具 ----- 注入 VS2017 3. ...
- Java演示设计模式中的写代码的代码
下边代码内容是关于Java演示设计模式中的单件模式的代码,应该是对小伙伴们有所用处. public class SimpleSingleton { private static SimpleSingl ...
- UVA352 The Seasonal War
本文为UserUnknown原创 题目本身不难理解,就是深搜(或广搜,有可能以后会加在这里). 但是洛谷的题目中没有截到输入输出的格式,下面是我从UVA复制下来的样例: Sample input 6 ...
- TensorFlow实现时间序列预测
常常会碰到各种各样时间序列预测问题,如商场人流量的预测.商品价格的预测.股价的预测,等等.TensorFlow新引入了一个TensorFlow Time Series库(以下简称为TFTS),它可以帮 ...
- MySQL如何安装-教程
1.先从官网上下载Mysql压缩包https://dev.mysql.com/downloads/mysql/2.解压出来的mysql压缩包是没有图片中的data文件夹和my.ini 如图所示: 3. ...
- Face The Right Way 开关(POJ3276)
描述: \( N 头牛排成了一列.每头牛或者向前或者向后.为了让所有的牛都面向前方,农夫约翰买了 一台自动转向的机器. 这个机器在购买时就必须设定一个数值 K,机器每操作一次恰好使 K 头连续的牛转向 ...
- 远程登陆与数据CP
1 SSH登陆原理 SSH,Secure Shell,是一套协议标准,可以用来实现两台机器之间的安全登陆以及安全的数据传送,其保证数据安全的原理是非对称加密. 传统的对称加密方式使用的是一套密 ...
- 【MySQL基础总结】常用函数库
常用函数库 数学函数 分类及含义 示例 字符串函数 分类及含义 示例 日期时间函数 分类及含义 示例 条件判断函数 分类及含义 示例 系统函数 分类及含义 加密函数 分类及定义 其他常用函数 分类及含 ...
- 更加灵活的参数校验,Spring-boot自定义参数校验注解
上文我们讨论了如何使用@Min.@Max等注解进行参数校验,主要是针对基本数据类型和级联对象进行参数校验的演示,但是在实际中我们往往需要更为复杂的校验规则,比如注册用户的密码和确认密码进行校验,这个时 ...
- 部署SSL站点 IIS+asp.net
使用SSL必须要有证书,今天我们就使用IIS内置的证书完成SSL的部署. 1.打开MMC证书管理器,文件->添加/删除管理单元->证书,双击->确定 2.找到:个人->证书下有 ...