音乐网站怎么做/黄山seo推广

1.去除devtool选项

这只适用于开发环境，这会造成打包的文件往往有几M，所以在生产环境必须去除此配置。

2.分离CSS

安装插件：

npm install extract-text-webpack-plugin --save

var ExtractTextPlugin = require("extract-text-webpack-plugin");...loaders:[{test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader")},{test: /\.less$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},......plugins: [...new ExtractTextPlugin("bundle.css")
]

3.使用webpack.optimize.UglifyJsPlugin插件压缩混淆JS代码

使用命令：webpack -p 

在webpack.config.js文件的plugins数组里面添加及配置插件，具体配置参考UglifyJS2文档

new webpack.optimize.UglifyJsPlugin({warnings: false,compress: {join_vars: true,warnings: false,},toplevel: false,ie8: false,
}),

4.切换到产品环境

在plugins中添加插件

new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify(process.env.NODE_ENV),},
}),

打包时运行：

set NODE_ENV=production && webpack -p

5.分离第三方库

在plugins中加入

new webpack.optimize.CommonsChunkPlugin({filename:"common.js",name:"commons"
});

6.按需打包Lodash

使用Lodash时，往往只需要使用其中部分功能，但整个文件引入是不合理的，我们需要通过插件让Webpack按需引入模块。
配置webpack.config.js

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');module.exports = {module: {loaders: [{loader: 'babel',test: /\.js$/,exclude: /node_modules/}]},babel: {presets: ['es2015'],plugins: ['transform-runtime', 'lodash']},plugins: [new LodashModuleReplacementPlugin,new webpack.optimize.OccurrenceOrderPlugin,new webpack.optimize.UglifyJsPlugin]
}

7.异步加载模块

对于直接require或import的模块，Webpack的做法是把依赖的文件都打包在一起，造成文件很臃肿。
所以在写代码的时候要注意适度同步加载，同步的代码会被合成并且打包在一起。
异步加载的代码会被分片成一个个chunk，在需要该模块时再加载，即按需加载。

require.ensure([], function(require){var list = require('./list');list.show();
}, 'list');