说明
玩转 webpack 学习笔记
分包：设置 Externals
思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中。
方法：使用 html-webpack-externalsplugin
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); module.exports = { plugins: [ new HtmlWebpackExternalsPlugin({ externals: [ { module: 'react', entry: '//11.url.cn/now/lib/15.1.0/react-with-addons.min.js?_bid=3123', global: 'React' }, { module: ' react-dom', entry: '//11.url.cn/now/lib/15.1.0/react-dom.min.js?_bid=3123', global: 'ReactDOM' } ] }) ] }
进一步分包
思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件
方法：使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用
使用 DLLPlugin 进行分包
const path = require('path'); const webpack = require('webpack'); module.exports = { context: process.cwd(), resolve: { extensions: ['.js', '.jsx', '.json', '.less', '.css'], modules: [__dirname, 'node_modules'] }, entry: { library: [ 'react', 'react-dom', ' redux', ' react-redux ' ] }, output: { filename: '[name].dll.js', path: path.resolve(_dirname, './build/library'), library: '[name]' }, plugins: [ new webpack.DllPlugin({ name: ' [name]', path: './build/library/[name].json' }) ] };
使用 DllReferencePlugin 引用 manifest.json
在 webpack.config.js 引入
module.exports = { plugins: [ new webpack.DllReferencePlugin({ manifest: require('./build/library/manifest.json') }) ] };
引用效果：
实战进一步分包
Step 1. 新建文件 webpack.dll.js
const path = require("path"); const webpack = require("webpack"); module.exports = { entry: { library: [ "react", "react-dom" ] }, output: { filename: "[name]_[chunkhash].dll.js", path: path.join(__dirname, "build/library"), library: "[name]" }, plugins: [ // webpack 内置插件 new webpack.DllPlugin({ name: "[name]_[hash]", path: path.join(__dirname, "build/library/[name].json") }) ] }
Step 2. 在 package.json 里添加 dll 分包的脚本
"scripts": { "dll": "webpack --config webpack.dll.js" },
Step 3. 运行命令
npm run dll # 或者 webpack --config webpack.dll.js
生成的文件如下：
Step 4. 先不分包，运行一下 npm run build
Step 5. 在 webpack.prod.js 插件里添加分包
new webpack.DllReferencePlugin({ manifest: require("./build/library/library.json") })
在运行 npm run build
我们可以看到速度跟体积都有了明显降低。
