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" } }

 轉載注明出處！！！謝謝合作！！！