webpack5初试配置常用变更

简介：webpack5从0-1搭建项目 配置

 

### 步骤
mkdir webpack5-demo
cd webpack5-demo
npm/cnpm init -y
npm/cnpm install webpack webpack-cli -D

### 依照vue-cli脚手架新建好目录

### 安装相关依赖
npm/cnpm install webpack webpack-cli --save-dev
npm/cnpm install --save lodash
## 加载css
npm/cnpm install --save-dev style-loader css-loader
## 加载字体 加载 images 图像
自带的在 webpack 5 中，可以使用内置的 Asset Modules

### 多入口问题产生？ --- 解决  
npm/cnpm install --save-dev html-webpack-plugin
如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的入口，会发生什么？会在构建时重新命名生成的 bundle，但是我们的 index.html 文件仍然引用旧的名称。让我们用 HtmlWebpackPlugin 来解决这个问题

### 在每次构建前清理 /dist 文件夹，这样只会生成用到的文件
npm/cnpm install --save-dev clean-webpack-plugin

### 问题产生？调试困难
devtool: 'inline-source-map',
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。

### watch mode(观察模式)
package.json文件配置命令
"watch": "webpack --watch"
cnpm/npm run watch 

### 问题产生？ 为了看到修改后的实际效果，你需要刷新浏览器
解决：
npm install --save-dev webpack-dev-server
webpack.config.js中配置
devServer: {
    contentBase: './dist',
}
package.json文件配置命令
"start": "webpack serve --open",
npm/cnpm start

### 使用 webpack-dev-middleware  参考官网：https://webpack.docschina.org/guides/development/
npm/cnpm install --save-dev express webpack-dev-middleware
webpack.config.js中配置
output: {
    publicPath: '/',
}
package.json文件配置命令
"server": "node server.js",
npm/cnpm run server

### vendor hash 发生变化是我们要修复的
optimization.moduleIds 设置为 'deterministic'

### 将文件标记为 side-effect-free(无副作用) 
通过 package.json 的 "sideEffects" 属性，来实现这种方式
"side effect(副作用)" 的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。举例说明，例如 polyfill，它影响全局作用域，并且通常不提供 export。

"sideEffects": false
如果你的代码确实有一些副作用，可以改为提供一个数组;
如果在项目中使用类似 css-loader 并 import 一个 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除：
"sideEffects": [
    "./src/xxx1.js",
    "./src/xxx2.js"
    ....,
    "*.css"
]

再或者
"sideEffects":["*.css","@babel/polyfill"],

sideEffects 和 usedExports（更多被认为是 tree shaking）是两种不同的优化方式。
sideEffects 更为有效 是因为它允许跳过整个模块/文件和整个文件子树

在使用 tree shaking 时必须有 ModuleConcatenationPlugin 的支持，您可以通过设置配置项 mode: "production" 以启用它。如果您没有如此做，请记得手动引入 ModuleConcatenationPlugin

总结：
webpack5的新特性：
1.更快的构建速度 【模块打包提供了一个可选的文件系统缓存。通过设置合适的缓存系统，我们可以大大加快构建速度，大大提高开发人员的工作效率】
2.更小的体积 【新版本的webpack对代码进行了模块化的管理，可以检测到无用代码，可以删除未使用的代码，可以删除模块内部的代码】
3.更智能的缓存优化 【对局部模块代码的修改，不会影响其它模块的缓存】
4.更灵活的模块组合 【允许多个Webpack构建协同工作。webpack5允许不同的应用程序从不同版本的webpack动态加载代码】
5.更高的版本要求 【nodejs的版本使用10.13以上版本，添加了实验性的WebAssembly，Async Web Assembly，Await等特性】

Webpack 5 增加了一个新的功能 "模块联邦"，它允许多个 webpack 构建一起工作

嵌套的 tree-shaking 
CommonJs Tree Shaking 
内部模块 tree-shaking  【optimization.innerGraph】

单一文件目标的代码分割 
只允许启动单个文件的目标（如 node、WebWorker、electron main）现在支持运行时自动加载引导所需的依赖代码片段。
这允许对这些目标使用 chunks: "all" 和 optimization.runtimeChunk

MemoryCachePlugin 增加了内存缓存功能。FileCachePlugin 增加了持久性（文件系统）缓存。
FileCachePlugin 使用序列化机制将缓存项目持久化到磁盘上或从磁盘上恢复

插件目的在于解决 loader 无法实现的__其他事__

### 冲突问题  mini-css-extract-plugin 支持css分割 支持HMR
将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。它支持css和sourceMaps的按需加载
rules: [
    {
        test: /\.(css|stylus)$/,
        use: [
            MiniCssExtractPlugin.loader,        
            'css-loader',                  
            {
            loader:'postcss-loader', // 跟MiniCssExtractPlugin.loader一起使用时 要添加 使用范围
            options:{
                plugins:[
                    require('autoprefixer')({
                        overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
                    })
                ]
            }
            },          
            'stylus-loader'                                 
        ],
        exclude:/node_modules/,
        include: [path.resolve(__dirname, 'src')]
    },
]

### 代码压缩
4.x版本后自动压缩
* development 不压缩代码    mode: 'development'  or   webpack --mode=development
* production     压缩代码，默认   mode: 'production'  or  webpack --mode=production
需要在webpack.config.js配置不启用压缩

// 安装 optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css文件
new OptimizeCssAssetsWebpackPlugin()

之前使用 uglifyjs-webpack-plugin
const uglify = require('uglifyjs-webpack-plugin');
plugins:[
    new uglify()
]

关于sass sass-loader 8.0语法 9.0 配置
https://github.com/chuzhixin/vue-admin-beautiful/blob/master/vue.config.js

参考相关具体配置
https://github.com/ddzy/vue2-webpack5-template/blob/main/webpack.config.ts

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const devMode = process.env.NODE_ENV !== 'production'

 module.exports = {
    mode: 'development', // 开发环境 默认是生产
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
    },
    //  entry: './src/main.js', // 单入口
    // 多入口
    entry:{
        index: {
            import: './src/main.js',
            dependOn: 'shared',
        },
        index2: {
            import: './src/main2.js',
            dependOn: 'shared',
        },
        shared: 'lodash',
    },
     // 出口
     output: {
        // [contenthash] substitution 将根据资源内容创建出唯一 hash。当资源内容发生变化时，[contenthash] 也会发生变化
        filename: 'js/[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        pathinfo: false, // webpack 会在输出的 bundle 中生成路径信息 在打包数千个模块的项目中，这会导致造成垃圾回收性能压力
        publicPath: './' // 如果报错 Automatic publicPath is not supported in this browser
     },

    //  如果我们要在一个 HTML 页面上使用多个入口时，还需设置 optimization.runtimeChunk: 'single'
    optimization: {
        // 使用 optimization.splitChunks 配置选项之后
        // 需要注意的是，插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小
        // splitChunks: {
        //     chunks: 'all',
        // },
        // runtimeChunk: 'single', // 打包额外生成了一个 runtime.bundle.js 文件
        // 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中，是比较推荐的做法
        moduleIds: 'deterministic',
        usedExports: true, // 配置此项需要将 mode 配置设置成development，以确定 bundle 不会被压缩
        runtimeChunk: 'single',
        splitChunks: {
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              chunks: 'all',
            },
          },
        },
    },
    // 应保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。如果不遵守此约定，webpack 可能会抛出错误
     module: {
        rules: [
          {
            test: /\.css$/i,
            // MiniCssExtractPlugin.loader,// loader取代style.loader,作用，提取js中的css文件
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
          // 不用搞file-loader url-loader 用type定义
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
            parser: {
                dataUrlCondition: {
                    maxSize: 8 * 1024,  //小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
                },
            },
            generator: {
                filename: 'images/[base]',
            },
          },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
            generator: {
                filename: 'fonts/[base]',
            },
          },
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
            // filename: 'css/[name].[contenthash].css', //输出的文件名字
            filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
            chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
        }), // 抽离css
        // 如果不想在 watch 触发增量构建后删除 index.html 文件，可以在 CleanWebpackPlugin 中配置 cleanStaleWebpackAssets 选项 来实现
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
        new HtmlWebpackPlugin({
          title: 'Development', // 首页标题
        }),
      ],
      // 持久缓存 【性能优化】
      cache: {
        // 1. 将缓存类型设置为文件系统
        type: 'filesystem', // 可以在 "memory" 和 "filesystem" 间进行选择
        buildDependencies: {
          // 2. 将你的 config 添加为 buildDependency，以便在改变 config 时获得缓存无效
          config: [__filename],
          // 3. 如果你有其他的东西被构建依赖，你可以在这里添加它们
          // 注意，webpack、加载器和所有从你的配置中引用的模块都会被自动添加
        },
      },
 }

reset.css测试文件1

* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'Nunito-Regular';
    src: url('./fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: 'Nunito-Bold';
    src: url('./fonts/Nunito-Bold.ttf');
}

@font-face {
    font-family: 'Nunito-SemiBold';
    src: url('./fonts/Nunito-SemiBold.ttf');
}

.hello {
    color: red;
    font-family: 'Nunito-Bold';
    background: url('./image/logo.png');
}

package.json测试文件

{
  "name": "webpack5-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.5",
    "style-loader": "^2.0.0",
    "webpack": "^5.20.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

 转载注明出处！！！谢谢合作！！！