参考文章:

  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 包

"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "6.24.1", //这个应该不需要了

升级了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 个人笔记的更多相关文章

  1. webpack4 自学笔记三(提取公用代码)

    全部的代码及笔记都可以在我的github上查看, 欢迎star:https://github.com/Jasonwang911/webpackStudyInit/tree/master/commonT ...

  2. webpack 4 升级点

    webpack 4 升级点: 默认entry为./src,默认output为/dist sideEffects 在webapck2开始支持ESModule后,webpack提出了tree-shakin ...

  3. webpack4学习笔记(二)

    webpack打包各种javascript文件 (本文只是提供一个学习记录,大部分内容来自网络) 一,打包js文件和es6代码 1,webpack命令打包js文件 Tip: 在webpack4.x之前 ...

  4. webpack3 项目升级 webpack4

    由于 vue-cli 2 构建的项目是基于 webpack3,所以只能自己动手改动,至于升级 webpack4之后提升的编译速度以及各种插件自己去体验. 修改配置 1.替换插件 extract-tex ...

  5. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  6. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  7. Webpack4 学习笔记一初探Webpack

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 打包文件 支持JS模块化 模式: production(0配置默认), development(生产环境) 更详细的 ...

  8. webpack4.x笔记-配置基本的前端开发环境(一)

    webpack的基本使用 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包.借用 webpack 官网的图片: 虽然webpack4.x的版本可以零配 ...

  9. webpack4学习笔记(一)

    webpack4 1,安装webpack npm insatll webpack --save-dev //安装最新版本 npm insatll webpack@<version> --s ...

随机推荐

  1. c语言----实战植物大战僵尸

    1. 原理 通过指针先找到阳光的地址,然后修改地址对应的值即修改阳光值. 2. 工具 CheatEngine  --- 查询进程中变量的地址 Dll注入工具  -----  注入 VS2017 3. ...

  2. Java演示设计模式中的写代码的代码

    下边代码内容是关于Java演示设计模式中的单件模式的代码,应该是对小伙伴们有所用处. public class SimpleSingleton { private static SimpleSingl ...

  3. UVA352 The Seasonal War

    本文为UserUnknown原创 题目本身不难理解,就是深搜(或广搜,有可能以后会加在这里). 但是洛谷的题目中没有截到输入输出的格式,下面是我从UVA复制下来的样例: Sample input 6 ...

  4. TensorFlow实现时间序列预测

    常常会碰到各种各样时间序列预测问题,如商场人流量的预测.商品价格的预测.股价的预测,等等.TensorFlow新引入了一个TensorFlow Time Series库(以下简称为TFTS),它可以帮 ...

  5. MySQL如何安装-教程

    1.先从官网上下载Mysql压缩包https://dev.mysql.com/downloads/mysql/2.解压出来的mysql压缩包是没有图片中的data文件夹和my.ini 如图所示: 3. ...

  6. Face The Right Way 开关(POJ3276)

    描述: \( N 头牛排成了一列.每头牛或者向前或者向后.为了让所有的牛都面向前方,农夫约翰买了 一台自动转向的机器. 这个机器在购买时就必须设定一个数值 K,机器每操作一次恰好使 K 头连续的牛转向 ...

  7. 远程登陆与数据CP

    1 SSH登陆原理   SSH,Secure Shell,是一套协议标准,可以用来实现两台机器之间的安全登陆以及安全的数据传送,其保证数据安全的原理是非对称加密.   传统的对称加密方式使用的是一套密 ...

  8. 【MySQL基础总结】常用函数库

    常用函数库 数学函数 分类及含义 示例 字符串函数 分类及含义 示例 日期时间函数 分类及含义 示例 条件判断函数 分类及含义 示例 系统函数 分类及含义 加密函数 分类及定义 其他常用函数 分类及含 ...

  9. 更加灵活的参数校验,Spring-boot自定义参数校验注解

    上文我们讨论了如何使用@Min.@Max等注解进行参数校验,主要是针对基本数据类型和级联对象进行参数校验的演示,但是在实际中我们往往需要更为复杂的校验规则,比如注册用户的密码和确认密码进行校验,这个时 ...

  10. 部署SSL站点 IIS+asp.net

    使用SSL必须要有证书,今天我们就使用IIS内置的证书完成SSL的部署. 1.打开MMC证书管理器,文件->添加/删除管理单元->证书,双击->确定 2.找到:个人->证书下有 ...