依赖nodejs
创建一个demo目录
mkdir webpack-demo && cd webpack-demo npm init -y npm install --save-dev webpack
#将接口代理到本地
devServer.proxy
#代码拆分
完成两类分离工作:
1.分离资源,实现缓存资源和并行加载资源
1)分离第三方库,因为它们基本保持不变,可以长时间缓存在用户的机器上。
如何使用 CommonsChunkPlugin 分离 vendor/library 代码
使用上面的 webpack 配置,我们看到生成了三个bundle:vendor
、main
和manifest
vendor:第三方库
main:应用代码
manifest:webpack runtime 代码,用来帮助 webpack 完成其工作
长效的 bundle 缓存是通过“基于内容的 hash 策略”来实现的(content-based hashing)
需要在
webpack.config.js中修改配置:
var webpack = require('webpack'); var path = require('path'); module.exports = function(env) { return { entry: { main: './index.js', vendor: 'moment' }, output: { filename: '[chunkhash].[name].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ names: ['vendor', 'manifest'] // 指定公共 bundle 的名字。 }) ] } };
2)分离CSS
如何使用 ExtractTextWebpackPlugin
来分离 css
本来webpack打包CSS时,使用了css-loader(它输出CSS作为JS模块),这个有个缺点就是将无法利用浏览器的异步和并行加载CSS的能力,网页必须等待,直到您的整个JavaScript 包下载完成,然后重绘网页。那么分离css就解决了这个问题。
只需要在webpack.config.js
文件中添加两个步骤即可。
module.exports = { module: { rules: [{ test: /\.css$/, - use: 'css-loader' + use: ExtractTextPlugin.extract({ + use: 'css-loader' + }) }] }, + plugins: [ + new ExtractTextPlugin('styles.css'), + ] }
3)按需分离(动态分离,前面两种是预先在配置中指定分离模块)
如何使用 require.ensure()
来分离代码
require.ensure(dependencies: String[], callback: function(require), chunkName: String)