webpack

依赖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)