react和webpacklian联合开发过程中涉及到一些配置的更改
1、热更新的开启
|
1 2 3 4 5 6 7 |
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server" }, } //给webpack-dev-server重新命名，就可以运行 npm start 来开启热更新 |
2、webpack性能设置
|
1 2 3 4 5 6 7 8 9 10 |
var webpack = require('webpack'); var path = require('path'); module.exports = { //性能 performance:{ hints:'warning', //级别：超出文件大小限制给出什么级别的提示 maxEntrypointSize:100000, //限制最后生成的bundle.js的大小，单位bytes maxAssetSize:450000, //对图片和文件的限制，大小bytes }, } |
3、source-map
打包后的文件被压缩过，使用sourceMap可以减小包的大小，分离依赖，加快打包速度，方便定位问题
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var webpack = require('webpack'); var path = require('path'); module.exports = { //性能 devtool: 'source-map', //这里总是报错有问题，使用cheap-module-source-map plugins:[ new BabiliPlugin(), new webpack.optimize.CommonsChunkPlugin({ name:'vendor' }), /*new webpack.SourceMapDevToolPlugin({ filename: '[file].map', include: ['app.js'], exclude: ['vendor.js'], columns: false })*/ ], } |
4 、webpack图表优化
所有包的依赖关系生成json文件，把文件上传到在线分析平台，然后得到反馈，以下是几个网址：
http://webpack.github.io/analyse/
http://chrisbateman.github.io/webpack-visualizer/
http://alexkuz.github.io/webpack-chart/
https://alexkuz.github.io/stellar-webpack/
(可以作为汇报的图表)
|
1 2 3 4 5 6 7 8 9 |
webpack --env production --profile --json > stats.json //或者配置到package中 { "scripts":{ "stats" : "webpack --env production --profile --json > stats.json" } } //执行 npm run stats |
持续更新…