阅读数:

react项目 webpack 1.0升级2.0 1.13.0->2.6.1

0

说明

webpack是大家都知晓的主流打包工具,或者形象的讲是“模块打包机”,看下图想象应该一目了然。
webpack1
很多人都配置配1.x版本的webpack,处于项目框架长久开发或者某些新的功能包对于webpack高版本的要求,比如新版本的react-pdf 2.x,要求webpack>=2.x。这时候你就不得不去升级webpack。抛开这些不说,先看看webpack2.x和webpack1.x的效率对比
上图是1.x打包后的文件大小,下图是2.x打包后的大小(同样的react项目),压缩比还是很惊人的
webpack2
webpack3
左图是1.x打包用时,右图是2.x打包用时,效率也明显提升了不少,这对于前端开发,编译的速度提升很大
程度能提升你的开发效率,而不是苦x的等待
webpack4

实现

是不是很想亲自实践一下,配置跟我一步步走起:
变化步步改:
1、resolve.root
resolve.rootresolve.modules替代
1.x

1
2
3
4
resolve: {
root: paths.client(),
extensions: ['', '.js', '.jsx', '.json']
},

2.x

1
2
3
4
resolve: {
modules: [paths.client(), "node_modules"],
extensions: ['.js', '.jsx', '.json']
},

2、loaders
loadersrules替代

  • 2.1 js|jsx
    1.x
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    webpackConfig.module.loaders = [{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
    cacheDirectory: true,
    plugins: ['transform-runtime'],
    presets: ['es2015', 'react', 'stage-0'],
    env: {
    production: {
    plugins: [
    'transform-react-remove-prop-types',
    'transform-react-constant-elements'
    ]
    }
    }
    }
    },
    {
    test: /\.json$/,
    loader: 'json-loader' // 2.x 不再需要自己配置
    }];

2.x

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
webpackConfig.module.rules = [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-0'],
env: {
production: {
plugins: [
'transform-react-remove-prop-types',
'transform-react-constant-elements'
]
}
}
}
}];

  • 2.2 css
    1.x
    1
    2
    3
    4
    5
    6
    7
    8
    9
    webpackConfig.module.loaders.push({
    test: /\.css$/,
    exclude: excludeCSSModules,
    loaders: [
    'style-loader',
    'css-loader',
    'postcss-loader'
    ]
    });

2.x

1
2
3
4
5
6
7
8
9
webpackConfig.module.rules.push({
test: /\.css$/,
exclude: excludeCSSModules,
use: [
'style-loader',
BASE_CSS_LOADER,
'postcss-loader'
]
});

  • 2.2 scss
    1.x
    1
    2
    3
    4
    5
    6
    7
    8
    9
    webpackConfig.module.loaders.push({
    test: /\.css$/,
    exclude: excludeCSSModules,
    loaders: [
    'style-loader',
    'css-loader',
    'postcss-loader'
    ]
    });

2.x

1
2
3
4
5
6
7
8
9
webpackConfig.module.rules.push({
test: /\.scss$/,
exclude: excludeCSSModules,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader?sourceMap'
]

  • 2.2 url/file loader
    1.x
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    webpackConfig.module.loaders.push(
    { test: /\.woff(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
    { test: /\.woff2(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
    { test: /\.otf(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
    { test: /\.ttf(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
    { test: /\.eot(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
    { test: /\.pdf(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
    { test: /\.svg(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
    { test: /\.(png|jpg|gif)$/, loader: 'url?name=images/[hash:8].[ext]&limit=8192' }
    )

2.x

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
webpackConfig.module.rules.push({
test: /\.woff2$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: '[path][name].[ext]',
mimetype: 'application/font-woff2'
}
}]
}, {
test: /\.otf$/,
use: [{
loader: 'file-loader',
options: {
limit: 10000,
name: '[path][name].[ext]',
mimetype: 'font/opentype'
}
}]
}, {
test: /\.ttf$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: '[path][name].[ext]',
mimetype: 'application/octet-stream'
}
}]
}, {
test: /\.eot$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: '[path][name].[ext]',
}
}]
}, {
test: /\.svg$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: '[path][name].[ext]',
mimetype: 'image/svg+xml'
}
}]
}, {
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[hash:8].[ext]',
}
}]
})

3、plugins

1
2
3
4
5
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
....
);

import ExtractTextPlugin from ‘extract-text-webpack-plugin’;
需要重新安装 npm install –save-dev extract-text-webpack-plugin@2.1.2
1.x

1
new webpack.NoErrorsPlugin();

2.x

1
new webpack.NoEmitOnErrorsPlugin() //也可不换,会有worning

1.x

1
2
3
new ExtractTextPlugin('[name].[contenthash].css', {
allChunks: true
})

2.x

1
2
3
4
5
6
webpackConfig.plugins.push(
new ExtractTextPlugin({
filename: '[name].[contenthash].css',
allChunks: true
})
);

4、postcss
1.x

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
webpackConfig.postcss = [
cssnano({
autoprefixer: {
add: true,
remove: false,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
})
];

2.x
在项目根目录下新建 postcss.config.js

1
2
3
4
5
6
7
8
9
module.exports = {
plugins: [
require('autoprefixer')({
add: true,
remove: false,
browsers: ['last 2 versions']
})
]
}

5、module.preLoaders
1.x

1
2
3
4
5
6
webpack.module.preLoaders = [{
test: /\.(js|jsx)$/,
include: new RegExp(config.dir_client),
loader: 'isparta',
exclude: /node_modules/
}];

2.x

1
2
3
4
5
6
7
webpack.module.rules.concat[{
test: /\.(js|jsx)$/,
enforce: "pre",
include: new RegExp(config.dir_client),
loader: 'isparta',
exclude: /node_modules/
}];

至此我们的整个配置文件改造完成,执行npm run dev
项目完美的跑起来了,且UI UE跟之前一样,说明我们改造成功了。

最后

但是有个问题,css,scss 会加在html style标签里,影响页面布局及加载速度。在1.x

1
2
test: /.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader" })

2.x 我们需要这样做

1
2
3
4
5
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "postcss-loader"]
})

0
赏点咖啡钱^.^