一期项目：《手把手从零打造企业级电商平台-前端实战》
二期项目：《React16+React-Router4 从零打造企业级电商后台管理系统》
第一个电商用户端课程在制作过程中用的是webpack@1.15.0，距离现在时间不算长，但这一年多时间webpack已经升级到v4了。1.15.0版本的最大好处就是能兼容IE8，所以对IE兼容性有要求的同学看到这就可以洗洗睡了。如果要升的话，这次升级的版本跨度应该是够大的。
第二个项目是React实现的电商后台管理系统，这个课程出来的时间要近一点，用到的技术也都是比较新的，webpack版本是3.x，跨度不是很大，所以这次并不准备对它升级。3到4的跨度不是很大，有兴趣的同学看完这个介绍，升级一下应该问题不大。
webpack@4.x的变化先来说下webpack4和之前版本里一些主要的变化：
1、webpack不再支持node v4，这是因为新的webpack和附属插件使用了es6的语法，v4版本对es6不是很到位，所以，就不伺候了。
2、开始采取约定优于配置的思路，webpack@4.x里把很多选项都设置了默认值，比如入口就是./src，输出目录就是./dist，当然如果你自己去设置，它也不会拦着。所以在用webpack@4.x的时候，我们甚至都可以没有webpack.config.js这个配置文件也能一样打包。
3、拆分了旧版本里的webpack，分成了用来处理逻辑的webpack和提供可执行命令的webpack-cli，这也是有的同学把webpack装成新版本以后会报找不到webpack-cli模块这个错误的原因。
4、添加了mode选项，用来区分编译的环境，提供了development、production和none三个选项，理论上这个选项是强制指定的，其实不指定的话它也是有默认值的，但会给出一个warning，官方这么强烈建议了，就显式的指定一下吧。指定方式有两种，一是在启动命令里：
./node_modules/.bin/webpack --mode production
另外一种就是在配置文件里指定，方式如下：
var config = {
mode: 'production' // 可选development、production和none
}
5、配置上的变动，类似删除了commonChunksPlugin，用optimization来代替这种。还有loader的用法也和1.15.0不一样了，但这个升级是在之前版本里就有的，不是webpack@4.x带来的。
6、性能优化，提高了打包性能。另外从webpack2起，引入了Tree-shaking机制来提出没有被引用的模块。它的原理是按着引用关系重新建立一个新的依赖树，而没有被引用的模块就不会被打包到最后的代码里。之前的压缩优化方式是先把所有模块都挂到树上，然后通过分析后，删掉没被引用的模块。从字面意思来看，我觉得原来的方式更像在摇树，把没用的摇下来。这两种方式最后压缩完的结果可能类似，但设计思路完全是从两个方向走的。
7、其他。以上这些就是一些比较主要的变化，更详细的升级文档可以参考下官方的说明：https://github.com/webpack/webpack/releases
升级过程1、升级nodejs，因为webpack4不再支持node v4以下的版本了，这里推荐6.12.3，升级完成后记得把项目里的node_modules删掉再重新install一遍。
2、按着以下版本重新安装依赖
"devDependencies": {
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.1.0",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"font-awesome": "^4.7.0",
"hogan.js": "^3.0.2"
}
安装插件的时候可以直接把package.json里的这些版本文件覆盖到原来项目里，然后删了node_modules目录，重新执行npm install。
当升级webpack时，其他插件的版本也要跟着升，这里面有两个插件要特别注意：
（1）webpack4里把原来版本里的webpack拆分成了两个东西，一个是webpack用来处理打包逻辑的，另外一个是webpack-cli是用来提供可执行命令的，webpack@4.x里这两个都要装。
（2）extract-text-webpack-plugin这个插件只有最新的beta版本能支持webpack@4.x，所以用命令安装的时候，需要指定版本，npm install extract-text-webpack-plugin@next --save-dev这样安装。
3、修改启动命令，把package.json里的scripts字段改成如下：
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server",
"dev_win": "./node_modules/.bin/webpack-dev-server",
"dist": "WEBPACK_ENV=online ./node_modules/.bin/webpack -p",
"dist_win": "set WEBPACK_ENV=online&& ./node_modules/.bin/webpack -p"
},
4、最后一步，修改webpack配置文件。下面把最新的配置文件粘出来，由webpack@1.15.0到webpack@4.x的变化都放在了配置文件的注释里：
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 环境变量配置，dev / online
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
// 获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name, title){
return {
template : './src/view/' + name + '.html',
filename : 'view/' + name + '.html',
favicon : './favicon.ico',
title: title,
inject : true,
hash : true,
chunks : ['common', name]
};
};
// webpack config
var config = {
mode : 'dev' === WEBPACK_ENV ? 'development' : 'production',
entry: {
'common' : './src/page/common/index.js',
'index' : './src/page/index/index.js',
'list': './src/page/list/index.js',
'detail' : './src/page/detail/index.js',
'cart': './src/page/cart/index.js',
'order-/confirm/i' : './src/page/order-/confirm/i/index.js',
'order-list' : './src/page/order-list/index.js',
'order-detail' : './src/page/order-detail/index.js',
'payment' : './src/page/payment/index.js',
'user-login' : './src/page/user-login/index.js',
'user-register' : './src/page/user-register/index.js',
'user-pass-reset' : './src/page/user-pass-reset/index.js',
'user-center': './src/page/user-center/index.js',
'user-center-update': './src/page/user-center-update/index.js',
'user-pass-update' : './src/page/user-pass-update/index.js',
'result' : './src/page/result/index.js',
'about' : './src/page/about/index.js',
},
output: {
// path : __dirname + '/dist/',
publicPath : 'dev' === WEBPACK_ENV ? '/dist/' : '//s.happymmall.com/mmall-fe/dist/',
filename : 'js/[name].js'
},
externals : {
'jquery' : 'window.jQuery'
},
module: {
rules: [
// css文件的处理
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// 模板文件的处理
{
test: /.string$/,
use: {
loader: 'html-loader',
options: {
minimize : true,
removeAttributeQuotes : false
}
}
},
// 图片的配置
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 2048,
name: 'resource/[name].[ext]'
}
}
]
},
// 字体图标的配置
{
test: /.(eot|svg|ttf|woff|woff2|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
}
]
},
resolve : {
alias : {
node_modules : __dirname + '/node_modules',
util : __dirname + '/src/util',
page : __dirname + '/src/page',
service : __dirname + '/src/service',
image : __dirname + '/src/image'
}
},
optimization:{
runtimeChunk: false,
splitChunks: {
cacheGroups: {
common: {
name: "common",
chunks: "all",
minChunks: 2
}
}
}
},
plugins: [
// // 独立通用模块到js/base.js
// new webpack.optimize.CommonsChunkPlugin({
// name : 'common',
// filename : 'js/base.js'
// }),
// 把css单独打包到文件里
new ExtractTextPlugin("css/[name].css"),
// html模板的处理
new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),
new HtmlWebpackPlugin(getHtmlConfig('list', '商品列表')),
new HtmlWebpackPlugin(getHtmlConfig('detail', '商品详情')),
new HtmlWebpackPlugin(getHtmlConfig('cart', '购物车')),
new HtmlWebpackPlugin(getHtmlConfig('order-/confirm/i', '订单确认')),
new HtmlWebpackPlugin(getHtmlConfig('order-list', '订单列表')),
new HtmlWebpackPlugin(getHtmlConfig('order-detail', '订单详情')),
new HtmlWebpackPlugin(getHtmlConfig('payment', '订单支付')),
new HtmlWebpackPlugin(getHtmlConfig('user-login', '用户登录')),
new HtmlWebpackPlugin(getHtmlConfig('user-register', '用户注册')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-reset', '找回密码')),
new HtmlWebpackPlugin(getHtmlConfig('user-center', '个人中心')),
new HtmlWebpackPlugin(getHtmlConfig('user-center-update', '修改个人信息')),
new HtmlWebpackPlugin(getHtmlConfig('user-pass-update', '修改密码')),
new HtmlWebpackPlugin(getHtmlConfig('result', '操作结果')),
new HtmlWebpackPlugin(getHtmlConfig('about', '关于MMall')),
],
devServer: {
port: 8088,
inline: true,
proxy : {
'**/*.do' : {
target: 'http://test.happymmall.com',
changeOrigin : true
}
}
}
};
module.exports = config;
