webpack dllPlugin 动态链接库文件, 当三方链接库文件存在时, 访问链接库文件, 否则把三方库打包到文件中, 以 react 作为三方链接库为例
操作步骤:
1, 安装 react:
yarn add react react-dom
2, 新建 dll 配置文件
参考下面 build/webpack.react.config.JS
3, 配置 package.JSON 命令, 运行命令生成 dll 文件和 manifest.JSON
"build:react": "webpack --config ./build/webpack.react.config"
4, 更改 index.html 模板加入 dll 引入
<script src="./_dll_react.js"></script>
5,webpack.prod.config.JS 加入引入 dll 配置
- plugins: [
- // 引入 dll
- new webpack.DllReferencePlugin({
- manifest: path.resolve(__dirname, '../dist', 'manifest.json')
- })
- ]
完整配置
build/webpack.base.config.JS
- // 开发和生成模式共同的配置
- let path = require('path');
- // path.resolve 相对路径转成绝对路径
- // console.log(path.resolve('dist'));
- // 以当前目录
- // console.log(__dirname);
- // HTML-webpack-plugins 插件
- let HtmlWebpackPlugins = require('html-webpack-plugin');
- //
- let MiniCSSExtractPlugin = require('mini-css-extract-plugin');
- //
- let webpack = require('webpack');
- // webpack 相关配置
- module.exports = {
- // 入口, 表示从哪里开始打包
- entry: {
- home: './src/index.js'
- },
- // 表示出口 (输出后文件相关配置)
- output: {
- // 打包后的文件名 多入口根据入口名称生成
- filename: 'build.js',
- // 输出后的路径 (必须是一个绝对路径)
- path: path.resolve(__dirname, '../dist')
- },
- // 插件配置
- plugins: [
- new HtmlWebpackPlugins({
- // 模板位置
- template: 'index.html',
- // 文件名
- filename: 'index.html'
- }),
- // 抽离 CSS 为单独文件
- new MiniCssExtractPlugin({
- filename: 'main.css'
- })
- ],
- //
- resolve: {
- // 解析三方库文件
- //modules: [ path.resolve('node_modules') ],
- // 扩展名
- extensions: ['.js', '.css', '.json', '.vue'],
- // 定义路径别名
- alias: {
- '@': path.resolve('src')
- }
- },
- module: {
- // loader
- rules: [
- {
- test: /\.CSS$/, // 匹配 CSS 文件
- use: [ MiniCssExtractPlugin.loader, 'css-loader']
- },
- {
- test: /\.Less$/, // 匹配 Less 文件
- use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
- },
- {
- test: /\.JS$/, // 匹配 JS 文件
- use: {
- loader: 'babel-loader',
- options: {
- presets: [
- '@babel/preset-env',
- '@babel/preset-react'
- ]
- }
- }
- }
- ]
- }
- }
build/webpack.dev.config.JS
- // dev 模式的配置
- const merge = require('webpack-merge');
- // const { smart } = require('webpack-merge');
- // 基础配置
- let base = require('./webpack.base.config');
- //
- let webpack = require('webpack');
- // 合并基础配置扩展开发模式配置
- module.exports = merge(base, {
- mode: 'development',
- devtool: 'source-map',
- //
- devServer: {
- // 端口, 默认 8080
- port: '8099',
- // 进度条
- progress: true,
- // 启动后访问目录, 默认是项目根目录, 这个设置到打包后目录
- contentBase: './dist'
- },
- plugins: [
- // 环境区分
- new webpack.DefinePlugin({
- DEV: JSON.stringify('development')
- })
- ]
- })
build/webpack.prod.config.JS
- // 生产模式的配置
- const { smart } = require('webpack-merge');
- // 基础配置
- let base = require('./webpack.base.config');
- //
- let webpack = require('webpack');
- //
- let path = require('path');
- // 合并基础配置扩展生产模式配置
- module.exports = smart(base, {
- //
- mode: 'production',
- //
- plugins: [
- // 环境区分
- new webpack.DefinePlugin({
- DEV: JSON.stringify('production')
- }),
- // 引入 dll
- new webpack.DllReferencePlugin({
- manifest: path.resolve(__dirname, '../dist', 'manifest.json')
- })
- ]
- })
build/webpack.react.config.JS
- /**
- * react dll 配置
- */
- let path = require('path');
- let webpack = require('webpack');
- // webpack 相关配置
- module.exports = {
- mode: 'development',
- // 入口, 表示从哪里开始打包
- entry: {
- react: ['react', 'react-dom']
- },
- // 表示出口 (输出后文件相关配置)
- output: {
- // 打包后的文件名 多入口根据入口名称生成
- filename: '_dll_[name].js',
- // 输出后的路径 (必须是一个绝对路径)
- path: path.resolve(__dirname, '../dist'),
- library: '_dll_[name]', // 变量名
- // libraryTarget: 'var' // 默认 var,commonjs,umd
- },
- // 插件
- plugins: [
- new webpack.DllPlugin({
- // 要和 library 一致
- name: '_dll_[name]',
- // 清单文件
- path: path.resolve(__dirname, '../dist', 'manifest.json')
- })
- ]
- }
index.HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 页面
- </title>
- </head>
- <body>
- <div id="root">
- 这是一个 div
- </div>
- <!-- 引入 dll-->
- <script src="./_dll_react.js">
- </script>
- </body>
- </HTML>
src/index.JS
- import React from 'react'
- import {
- render
- } from "react-dom";
- // 渲染节点
- render(<h1>react 渲染的节点 </h1>, Windows.root)
来源: http://www.jianshu.com/p/7a6462200333