Webpack高级概念

最新推荐文章于 2022-08-21 10:55:31 发布

hahalang-

最新推荐文章于 2022-08-21 10:55:31 发布

阅读量827

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/sinat_40697723/article/details/96166992

版权

webpack 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一. Tree Shaking 概念详解

1、接着上次的代码

index.js：

import '@babel/polyfill';

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
  render() {
    return <div>hello world</div>
  }
}

ReactDom.render(<App />, document.getElementById('root'));

实际上当前版本的Webpack比较新，如果在webpack.config.js里面配置了babel-loader的相关内容（其实我们已经把它移到.babelrc这个文件中了），如果我们对presets下的useBuiltIns设置了usage这样的一个配置参数的话。那么我们index.js文件中不去引入babel/polyfill也是可以的。

2、

index.js:

import {add} from './math.js';

add(1, 2);

math.js:

export const add = (a, b) => {
  console.log(a + b);
}

export const minus = (a, b) => {
  console.log(a - b);
}

执行npx webpack，控制台打印出3。但是我们去main.js里面发现我们没有import的minus方法也打包了。这是没有必要的，因为我们的业务代码只引入了add方法，将minus也打包会导致打包后的main.js过大。最理想的打包方式就是我们引入什么就打包什么。解决办法：

webpack在2.0版本以后提出了Tree shaking这个概念：实际上就是把一个模块里没用的东西都摇晃（shaking表示摇晃）掉。一个模块可以理解成一个树，比如说math.js文件是一个模块，里面会导出很多的内容，这些内容可以理解成一个小的树形结构。而我们在index.js中只引入树的一部分，只需要把引入的那一部分打包即可。

注意： Tree-shaking只支持ES module模块引入的方式引入。

配置Webpack.config.js:

mode设置成 'development'的时候是没有Tree shanking这个功能的，所以我们需要自己配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: {
    main: './src/index.js'
  },
  devServer: {
    contentBase: './dist',
    port: 10000,
    hot: true
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader:'babel-loader',
    },
    {
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 10240
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {    //在开发环境中配置Tree shaking
    usedExports: true    //意思就是去打包引入的模块
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

package.json:

小知识：

{
  "name": "webpackDemo",
  "sideEffects": false,
  "version": "1.0.0",
  "description": "",
  "main": "postcss.config.js",
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@babel/runtime-corejs2": "^7.5.4",
    "autoprefixer": "^9.6.1",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^3.1.4",
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6"
  },
  "scripts": {
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

"sideEffects": false, 意思是比如index.js中引入了babel/polyfill文件，由于它没有导出任何东西，用了Tree-shaking后导致打包会忽略它。因为当前index.js中没有引入像babel/polyfill这样的包，所以设置成false。表示没有需要特殊处理的东西。

重新执行打包，发现还是把minus给打包了，这是因为在开发环境中生成的代码需要做一些调试，如果Tree-shaking把一些代码删除掉的话

，在做调试的时候，代码对应的sourcemap的行数就都错了。所以Tree-shaking还是会保留这些代码。不过从下图可以看出，它已经提示我们了导出的只用了add这个模块。

production环境下：此时Tree-shaking就会生效了。配置如下：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  entry: {
    main: './src/index.js'
  },
  devServer: {
    contentBase: './dist',
    port: 10000,
    hot: true
  },
  module: {
    rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader:'babel-loader',
    },
    {
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 10240
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  //该模式下Tree-shaking的配置自动就会写好了，我们不用自己配webpack.config.js
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

再次执行打包后发现Tree-shaking就生效了：

二. Develoment 和 Production 模式的区分打包

1、当我们项目开发完毕，就需要使用 production模式打包上线。两种打包模式的差异：

开发环境中sourcemap是非常全的，这样的话再开发环境下能够帮我们快速的定位问题。production模式下，由于已经要上线了，此时sourcemap就不是那么重要了，此时的sourcemap会更加简洁一些或者我们通过生成一个.map文件来进行存储。
开发环境下我们的代码不需要进行压缩，方便我们查看打包后的代码。一旦代码要上线，此时我们就希望代码被压缩，所以production模式下代码是被压缩过的。

2、我们切换两种模式的时候，需要经常修改webpack.config.js文件，这样很麻烦。解决办法：

首先将 development 模式下的 webpack 配置文件命名为 webpack.dev.js 。
在根目录下新建一个 webpack.prod.js 文件，里面放置我们线上环境下的webpack配置代码。

webpack.dev.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist',
    port: 10000
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {    //在开发环境中配置Tree shaking
    usedExports: true    //意思就是去打包引入的模块
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

webpack.prod.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

package.json：

dev: 如果要启动devserver进行开发的话，那么就是使用开发环境的webpack配置

build: 如果打包线上文件的话，就使用webpack.prod.js这个配置

此时运行npm run dev，进行的是开发环境的webpack打包配置。运行npm run build，执行的是生产环境的打包配置。

3、上面的两种打包方案的文件中存在大量的重复代码，优化方案：

根目录下创建webpack.common.js文件。
将两者共有的代码都赋值到该文件下，并将之前两个文件共有的代码删除。
引入一个第三方模块： cnpm install webpack-merge -D，帮助我们将common的代码和两个打包文件代码做一个融合。

webpack.common.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

webpack.dev.js:

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const devConfig = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist',
    port: 10000
  },
  optimization: {    //在开发环境中配置Tree shaking
    usedExports: true    //意思就是去打包引入的模块
  }
}

module.exports = merge(commonConfig, devConfig);   //将自有的和公共的做一个结合

webpack.prod.js:

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

const prodConfig = {
  mode: 'production',
  devtool: 'cheap-module-source-map'
}

module.exports = merge(commonConfig, prodConfig);

此时能够正常进行两种不同方案的打包。

注意：如果将三个文件都放在一个文件夹下面，此时package.json文件的命令路径需要修改，比如在build文件夹下：

"dev": "webpack-dev-server --config ./build/webpack.dev.js"

此时应该修改output配置：

三. Webpack 和 Code Splitting

Code Splitting：指的是代码分割。

此时的目录结构：

因为我们希望查看打包后的文件代码，所以不能用npm run dev来打包，添加命令：

1、例子

安装一个插件：cnpm install lodash --save 它是一个功能集合，提供很多方法，可以高性能地去帮助我们使用字符串拼接的一些函数等。
index.js添加代码：

import _ from 'lodash';

console.log(_.join(['a', 'b', 'c']));   //a,b,c

打包后打印出a,b,c。

假如我们index.js的业务逻辑很多，打包的话会把工具库和业务逻辑都打包到main.js文件中。此时虽然也能正常运行，但是main.js会比较大，导致加载时间很长。还有就是假如我们修改了业务代码，用户要重新去加载main.js，此时又要等很长的时间，这样就导致用户体验很差。

解决办法：

src目录下新建一个lodash.js文件，添加代码：

import _ from 'lodash';

window._ = _;  //加载了一个lodash,又将lodash挂载到了全局的下划线上面，这样的话我们在其它地方就可以是使用下划线这个变量了。

index.js：

console.log(_.join(['a', 'b', 'c']));   //a,b,c

webpack.common.js添加配置：

  entry: {
    lodash: './src/lodash.js',
    main: './src/index.js'
  }

再次打包，运行正常。

此时打包后分成了两个js文件，这带来的好处就是当我们修改了业务代码，用户只需要加载打包后的业务js代码即可，不用加载库的代码。

在项目中对代码公用部分进行拆分来提升项目运行的速度，也就是Code Splitting。

2、上面的例子我们是自己做的公用代码拆分，它不够智能。webpack通过它自带的一些插件可以智能地帮助我们做一些拆分工作。

删除lodash.js文件，修改index.js文件：

import _ from 'lodash';
console.log(_.join(['a', 'b', 'c']));   //a,b,c

添加weback.common.js配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'   //意思就是我要帮你去做代码分割了
    }
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  }
}

此时执行npm run dev-build打包命令，发现dist文件夹下面打包了两个js文件，一个是业务逻辑js，还有一个是类库js。

这种代码分割配置适合上面这种同步模块的分割。

3、webpack中的代码分割不仅仅适合上面这种同步模块的分割。异步的代码也能进行分割，而且不需要添加上面的那种配置就会自动进行。

index.js：

function getComponent() {
  return import('lodash').then(( { default: _ } ) => {
    var element = document.createElement('div');
    element.innerHTML = _.join(['z', 't'], '-');
    return element;
  })
};

getComponent().then( element => {
  document.body.appendChild(element);
});

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  // optimization: {
  //   splitChunks: {
  //     chunks: 'all'   //意思就是我要帮你去做代码分割了
  //   }
  // },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  }
}

执行打包命令，此时webpack对于这种异步的代码也能智能地进行分割。

四. SplitChunksPlugin 配置参数详解

webpack的代码分割底层使用了SplitChunksPlugin这个插件。

上面打包之后的dist文件夹：

1、我们希望把 0.js 改一个名字

修改index.js文件：

function getComponent() {
  //下面的意思就是异步地引入lodash这样一个库，当我做代码分割的时候，单独给lodash进行打包的时候，给它起个名字叫lodash
  return import(/* webpackChunkName: "lodash" */'lodash').then(( { default: _ } ) => {
    var element = document.createElement('div');
    element.innerHTML = _.join(['z', 't'], '-');
    return element;
  })
};

getComponent().then( element => {
  document.body.appendChild(element);
});

安装一个插件帮我们识别上面那种魔法字符串写法：cnpm install --save-dev @babel/plugin-syntax-dynamic-import
.babelrc添加配置：

{
  "presets":[
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-syntax-dynamic-import"] 
}

执行 npm run dev-build 命令后，

打包的lodash.js文件名却不是我们给的那个，修改webpack.common.js配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',   //意思就是我要帮你去做代码分割了
      cacheGroups: {
        vendors: false,
        default: false
      }
    }
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  }
}

执行打包命令后，dist文件夹下：

2、SplitChunks配置介绍：

splitChunks: {
    chunks: "async",  //在做代码分割的时候，只对异步代码生效。
    minSize: 30000,   //发现引入的块大于30000个字节的话，就会帮我们做代码分割
    minChunks: 1,     //当一个Chunk被至少用了多少次的时候，才对他进行代码分割
    maxAsyncRequests: 5,  //同时加载的模块数，最多是5个
    maxInitialRequests: 3,  //整个网站首页进行加载的时候，或者说入口文件进行加载的时候，入口文件可能会引入其它的js文件，入口文件如果做代码分割，最多只能分割出3个。此处一般不修改
    automaticNameDelimiter: '~',  //组和文件名之间连接的符号
    name: true,   //打包生成的名字通过cacheGroup设置有效。此处一般不变
    cacheGroups: {  //如果都符合下面俩个组的要求，那么谁的priority值大，就用谁的
        vendors: {  //vendors组
            test: /[\\/]node_modules[\\/]/,   //如果是从node_modules引入的
            priority: -10
        },
    default: {      //这个组里面没有test，意思就是所有的模块都符合要求
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true  //如果一个模块已经被打包了，再打包就会忽略这个模块，直接使用之前使用的那么模块就可以
        }
    }
}

对同步的代码进行分割：

splitChunks: {
    chunks: "all",   //1  同步和异步代码都会做分割，initial表示对同步代码做分割
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {  //2
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            filename: 'vendors.js'    //打包后的名字不带main,只有vendors
        },
        default: false   
    }
}

五. Lazy Loading 懒加载，Chunk 是什么？

1、实现一个懒加载的行为

index.js:

function getComponent() {
  return import(/* webpackChunkName: "lodash" */'lodash').then(( { default: _ } ) => {
    var element = document.createElement('div');
    element.innerHTML = _.join(['z', 't'], '-');
    return element;
  })
};

document.addEventListener('click', () => {
  getComponent().then( element => {
    document.body.appendChild(element);
  });
})

webpack.common.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 

module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',   //意思就是我要帮你去做代码分割了
      cacheGroups: {
        vendors: false,
        default: false
      }
    }
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  }
}

执行打包命令，此时控制台的network只加载了main.js:

再页面点击之后，才加载lodash.js文件：

上面这种做法的好处是能够让页面的加载速度更快，只加载该页面用到的js代码。

可以使用async函数来实现上面的效果，index.js：

async function getComponent() {
  const { default: _ } = await import(/* webpackChunkName: "lodash" */'lodash');
  const element = document.createElement('div');
  element.innerHTML = _.join(['z', 't'], '-');
  return element;
}

document.addEventListener('click', () => {
  getComponent().then( element => {
    document.body.appendChild(element);
  });
})

2、Chunk

Webpack打包过后生成了几个js文件，每个js文件我们都把它叫做一个Chunk。

六. 打包分析，Preloading, Prefetching

1、打包分析：当我们使用Webpack进行打包之后，我们可以借助打包分析的工具来对我们的打包文件进行一定的分析，然后看打包是否合理。

打包分析网址

上面网址中的教程：

运行：npx webpack --profile --json > stats.json 会在根目录下生成一个stats.json，该文件就是对打包过程的一个描述。
生成该文件以后，我们就可以借助一些工具来分析里面的内容了：进入上面的网址，点击首页的链接，就会进入一个页面，进入之后将stats.json文件上传上去就会帮我们进行打包分析了。

除了这个分析方法之外，还有很多别的方法，可以去webpack的文档中查看。

七. CSS 文件的代码分割

index.js

import './style.css';

在src目录下创建style.css文件，添加代码：

body {
  background-color: green;
}

执行打包后发现虽然dist目录下没有css文件，但是页面却又效果。这是因为webpack在做打包的时候会把Css文件直接打包到js里面。

1、希望实现Css文件单独打包进dist文件夹下面。

借助 MiniCssExtractPlugin 这个插件来进来css代码分割。

安装：

npm install --save-dev mini-css-extract-plugin

webpack.common.js添加配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); 
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.jpg$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }, {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,    //1
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }, {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']   //2
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({})
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].js'
  }
}

此时执行打包命令后发现dist目录下成功打包出了css文件。

2、做Css代码的压缩

const TerserJSPlugin = require('terser-webpack-plugin');
// 安装这两个插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // 配置压缩
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

hahalang-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Webpack高级概念

一. Tree Shaking 概念详解1、接着上次的代码index.js：import '@babel/polyfill';import React, { Component } from 'react';import ReactDom from 'react-dom';class App extends Component { render() { ret...
复制链接

扫一扫

专栏目录