webpack 升级

[cheungseol]

webpack 版本由 1.x 升级至 3.5.6 (官方称2、3版本之间差异不大，所以一步到位)

loaders

--save-dev

extract-text-webpack-plugin 从1.0.1升级到2.1.2

webpack-hot-middleware 到 ^2.19.1

css-loader ^0.23.1 到 0.28.7

less-loader ^2.2.2 4.0.5

sass-loader ^4.0.0 6.0.6

node-sass : "^3.8.0", 4.5.3

babel-loader ^6.2.0 7.1.2

file-loader ^0.9.0 0.11.2

happypack ^3.0.2 4.0.0

lodash ^3.10.1 4.17.4

style-loader ^0.13.0 0.18.2

react-bootstrap 0.31.3

react-bootstrap-typeahead 2.0.0-alpha.3

参考

迁移到新版本

Plugins

[cheungseol]

resolve

1. 不再支持 root 属性， modules 属性取而代之

2. extensions 中不再需要配置空字符串

common.config

resolve: {
                root: [process.cwd() + '/client', process.cwd() + '/node_modules'],
                extensions: ['', '.js', '.jsx', '.scss'],
                alias: {
                    utils: path.resolve(__dirname, './client/utils/')
                }
            },

cache 属性的更改待确定

 resolve: {
                modules: [
                    process.cwd() + '/client', process.cwd() + '/node_modules'
                ],
                extensions: ['.js', '.jsx', '.scss'],
                alias: {
                    utils: path.resolve(__dirname, './client/utils/')
                }
            },

[cheungseol]

module

1. "loader"的名称需要补全后缀“-loader”

2. loaders 属性更名为

common.config

module: {
                loaders: [{
                    test: /\.js$/,
                    loaders: process.env.NODE_ENV == 'production' && ['happypack/loader?id=jsPack'] || ['babel?cacheDirectory=true'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.less$/,
                    loaders: ['style', 'css', 'less'],
                    include: __dirname
                }, {
                    test: /\.scss$/,
                    loaders: ['style', 'css', 'sass'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.css$/,
                    loaders: ['style', 'css'],
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['url?limit=8192'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['file?name=[name].[ext]?[hash]'],
                    exclude: /node_modules/,
                    include: __dirname
                },{
                    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                    loader: 'url-loader?limit=50000&name=[path][name].[ext]'
                }]
            },

升级后：

            module: {
                rules: [{
                    test: /\.js$/,
                    loaders: process.env.NODE_ENV === 'production' && ['happypack/loader?id=jsPack'] || ['babel-loader?cacheDirectory=true'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader'],
                    include: __dirname
                }, {
                    test: /\.scss$/,
                    loaders: ['style-loader', 'css-loader', 'sass-loader'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.css$/,
                    loaders: ['style-loader', 'css-loader'],
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['url?limit=8192'],
                    exclude: /node_modules/,
                    include: __dirname
                }, {
                    test: /\.(png|jpg|jpeg|gif|eot|svg|ttf|woff|woff2)$/,
                    loaders: ['file-loader?name=[name].[ext]?[hash]'],
                    exclude: /node_modules/,
                    include: __dirname
                },{
                    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                    loader: 'url-loader?limit=50000&name=[path][name].[ext]'
                }]
            },

[cheungseol]

plugins

删除以下两个的使用，新版本webpack 已经默认支持

new webpack.optimize.DedupePlugin(),
config.plugins.unshift(new webpack.optimize.OccurenceOrderPlugin());

happypack 配置删除cacheContext属性，新版本happypack 已不再支持配置该属性：

 new happypack({
                     id: 'jsPack',
                     loaders: ['babel?cacheDirectory=true'],
                     loaders: ['babel-loader?cacheDirectory=true'],
                     threadPool: happyPackPool,
                    // cacheContext: {
                    //   env: process.env.NODE_ENV
                    // }

                 }),

[cheungseol]

plugins

DllPlugin 和 DllReferencePlugin

这两个插件的配置需要在不同的文件中。 DllPlugin 负责生成 DllReferencePlugin 需要用到的 manifest 文件。

package.json 中增加：

"webpack.dll": "export BABEL_ENV=production && webpack --config dll.reference.js --colors --profile --display-modules",

DllPlugin配置文件：

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        lib: ['react', 'react-dom', 'react-router', 'moment', 'react-redux', 'antd']
    },
    output: {
        path: path.resolve(__dirname, 'server/public/js/lib'),
        filename: '[name].js',
        library: '[name]'
    },
    plugins: [
        new webpack.DllPlugin({
            path: './manifest.json',
            name: '[name]',
            context: path.resolve(__dirname, 'client/')
        })
    ],
    cache: true
}

DllReferencePlugin 配置

plugins: [
               // ...
                new webpack.DllReferencePlugin({
                    context: path.resolve(__dirname, 'client/'),
                    manifest: require('./manifest.json'),
                })
            ],