webpack 合并压缩_webpack的运用

声明：受朋友之托，托管其原创文章。 作者：JEN_最前端。 个人主页： https://juejin.im/user/1011206430141975/post

补充知识点 Development 与 Production 模式的区别

Development (开发阶段)

• 使用dev-server会开启一个本地服务器，可以本地进行服务器的运行状态的模拟，热更新进行实时模拟

• source-map 会包含大量错误提醒信息，体积巨大

• 无需压缩，方便直接观看代码

Producetion (生产环境)

• source-map 非常简洁

• 压缩代码

Development 与 Production 的分文件配置

当我们构建项目的时候，两个模式如果分开文件配置就会导致配置代码重复问题，我们只需要把不同的整理出来，最后打包的时候在合并一下就好了

npm install webpack-merge --save-dev  这个插件是用来合并配置的npm install webpack-dev-server --save-dev

webpack.common.js 公共配置

const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {
      entry: {
        index: './src/index.js'  },  output: {
        path: path.resolve(__dirname, './bundle')  },  plugins: [      new htmlWebpackPlugin(),      new CleanWebpackPlugin()  ]}

webpack.dev.js  开发配置

const webpack = require('webpack');const { merge } = require('webpack-merge');const commonConfig = require('./webpack.common');let devConfig = {
      mode: 'development',  devtool: 'cheap-module-eval-source-map',  devServer: {
        contentBase: './build',    open: true,    port: 8080,    hot: true  },  plugins: [      new webpack.HotModuleReplacementPlugin()  ]}module.exports = merge(devConfig, commonConfig)

webpack.prod.js 生产环境配置

const { merge } = require('webpack-merge');const commonConfig = require('./webpack.common');let prodConfig = {
      mode: 'production',  devtool: 'cheap-module-source-map',  optimization: {
        useExports: true // 开启 Tree Shaking  }}module.exports = merge(prodConfig, commonConfig)

code Splitting

在之前项目中，无论引用了多少插件，最后输出的还是单个js文件，这样就会造成

• 单文件过大

• 业务代码和环境代码压缩到一起

• 单次修改业务代码，就得重新打包所有文件

• 每次修改业务代码，最终的打包出来的js就是一个新的文件(即便只是改了一个字母)，就会导致用户浏览器需要重新请求该文件

ps: 当第一次请求完之后，浏览器会将请求的文件缓存中浏览