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 ...
随机推荐
- Ubuntu parted 命令 写在脚本里时要带 -s 参数
否则会要求用户输入,造成脚本卡住.
- SAP采购订单入库后不允许修改单价增强
需求:在根据采购订单做了入库凭证之后,如果用户反审批采购订单去修改单价,系统提示‘已收货,不允许修改单价’. 判断流程:是否有入库凭证 如果采购订单条件按采购信息记录定价,这个价格本来就不能修改,只能 ...
- OSG加载倾斜摄影数据
目录 1. 概述 2. 实例 2.1. 代码 2.2. 解析 3. 结果 1. 概述 ContextCapture(Smart3D)生成的倾斜摄影模型数据一般都形如如下组织结构: 在Data目录下包含 ...
- SQLCommand 相关应用
SQL command 对象:执行指定数据库中相应的操作 (执行相应的SQL语句)string str1 = "select * from tb_student "Create: ...
- 配置windows自动修改密码和自动登录
日常运维多台服务器,每季度要修改一次密码,非常麻烦,现做一个VBS脚本,计划任务设置每季度第一天三点定时运行,则可解决该问题,具体实现脚本如下:autochg_pwd.vbs ystr=year(No ...
- DFS--POJ 1190 生日蛋糕
Description 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri ...
- UVA352 The Seasonal War
本文为UserUnknown原创 题目本身不难理解,就是深搜(或广搜,有可能以后会加在这里). 但是洛谷的题目中没有截到输入输出的格式,下面是我从UVA复制下来的样例: Sample input 6 ...
- unittest(执行用例)
from selenium import webdriver from time import sleep import unittest#导入unittest库 import HTMLTestRun ...
- Spring依赖注入—@Resource注解使用
1.@Autowired默认按类型装配(这个注解是属业spring的),默认情况下必须要求依赖对象必须存在,如果要允许null 值,可以设置它的required属性为false,如:@Autowire ...
- python 中关于无法导入自己写的类。解决方法
1.错误描述 之前在学习python的过程中,导入自己写入的包文件时.from 自己写的类,会发现没有弹出选择.并且全输入类名称后会发现类名与相关导入的方法会爆红.如图: 2.原因分析 pycharm ...