webpack學習---生產模式--生產模式基本模板
阿新 • • 發佈：2021-10-22
生產配置模板
/* webpack.config.js webpack的配置檔案 作用: 指示 webpack 幹哪些活（當你執行 webpack 指令時，會載入裡面的配置） 所有構建工具都是基於nodejs平臺執行的~模組化預設採用commonjs。 */ // resolve用來拼接絕對路徑的方法 const {resolve} = require('path'); const HtmlWebpackPlugin= require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); process.env.NODE_ENV = 'production'; module.exports = {// webpack配置 // 入口起點 entry: './src/js/index.js', // 輸出 output: { // 輸出檔名 filename: 'js/built.js', // 輸出路徑 // __dirname nodejs的變數，代表當前檔案的目錄絕對路徑 path: resolve(__dirname, 'build') },// loader的配置 module: { rules: [ // 詳細loader配置 // 不同檔案必須配置不同loader處理 //js程式碼檢查eslint { test: /\.js$/, exclude: /node_modules/, // 優先執行 enforce: 'pre', loader: 'eslint-loader', options: { // 自動修復eslint的錯誤 fix: true } }, //相容性處理 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { // 預設：指示babel做怎麼樣的相容性處理 presets: [ [ //第一種方式 基本js語法處理 '@babel/preset-env', // 第三種家在方式 --- core-js { // 按需載入 useBuiltIns: 'usage', // 指定core-js版本 corejs: { version: 3 }, // 指定相容性做到哪個版本瀏覽器 targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } }, //處理css資源 { // 匹配哪些檔案 test: /\.css$/, // 使用哪些loader進行處理 use: [ // use陣列中loader執行順序：從右到左，從下到上 依次執行 // 建立style標籤，將js中的樣式資源插入進行，新增到head中生效 // 'style-loader', //*** 這個loader取代style-loader。作用：提取js中的css成單獨檔案 MiniCssExtractPlugin.loader, // 將css檔案變成commonjs模組載入js中，裡面內容是樣式字串 'css-loader', //設定css相容性 // 使用loader的預設配置 // 'postcss-loader', // 修改loader的配置 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ "postcss-preset-env" ], ], // parser: "postcss-js", }, // execute: true, }, } ] }, { //處理less檔案 test: /\.less$/, use: [ // 'style-loader', //*** 這個loader取代style-loader。作用：提取js中的css成單獨檔案 MiniCssExtractPlugin.loader, 'css-loader', //設定css相容性 // 使用loader的預設配置 // 'postcss-loader', // 修改loader的配置 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ "postcss-preset-env" ], ], // parser: "postcss-js", }, // execute: true, }, }, // 將less檔案編譯成css檔案 // 需要下載 less-loader和less 'less-loader' ] }, // 處理外部(css)圖片資源 { // 問題：預設處理不了html中img圖片 // 處理圖片資源 test: /\.(jpg|png|gif)$/, // 需要一個type 否則會出現問題 type: 'javascript/auto', // 使用一個loader // 下載 url-loader file-loader loader: 'url-loader', options: { // 圖片大小小於8kb，就會被base64處理 // 優點: 減少請求數量（減輕伺服器壓力） // 缺點：圖片體積會更大（檔案請求速度更慢） limit: 8 * 1024, outputPath: 'imgs', // 問題：因為url-loader預設使用es6模組化解析，而html-loader引入圖片是commonjs // 解析時會出問題：[object Module] // 解決：關閉url-loader的es6模組化，使用commonjs解析 esModule: false, // 給圖片進行重新命名 // [hash:10]取圖片的hash的前10位 // [ext]取檔案原來副檔名 name: '[hash:10].[ext]', } }, // 處理html檔案的img圖片 { test: /\.html$/, // 處理html檔案的img圖片（負責引入img，從而能被url-loader進行處理） loader: 'html-loader', }, // 打包其他資源(除了html/js/css資源以外的資源) { // 排除css/js/html資源 exclude: /\.(css|js|html|less|jpg|png)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media' } }, ] }, optimization: { //設定壓縮css外掛 minimizer: [ // 在 webpack@5 中，你可以使用 `...` 語法來擴充套件現有的 minimizer（即 `terser-webpack-plugin`），將下一行取消註釋 // `...`, new CssMinimizerPlugin(), ], //預設是在生產環境才會壓縮程式碼,設定為true則開發環境開啟壓縮程式碼 minimize: true }, // plugins的配置 plugins: [ // 詳細plugins的配置 // html-webpack-plugin // 功能：預設會建立一個空的HTML，自動引入打包輸出的所有資源（JS/CSS） // 需求：需要有結構的HTML檔案 new HtmlWebpackPlugin({ // 複製 './src/index.html' 檔案，並自動引入打包輸出的所有資源（JS/CSS） template: './src/index.html', minify: { // 移除空格 collapseWhitespace: true, // 移除註釋 removeComments: true } }), //從js提取css外掛 new MiniCssExtractPlugin({ // 設定輸出的檔案目錄和重設檔名 filename: 'css/built.css' }) ], // 模式 mode: 'production' }
package.json配置
{ "devDependencies": { "@babel/core": "^7.15.8", "@babel/preset-env": "^7.15.8", "babel-loader": "^8.2.3", "core-js": "^3.18.3", "css-loader": "^6.4.0", "css-minimizer-webpack-plugin": "^3.1.1", "eslint": "^7.32.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.25.2", "file-loader": "^6.2.0", "html-loader": "^3.0.0", "html-webpack-plugin": "^5.4.0", "jquery": "^3.6.0", "less": "^4.1.2", "less-loader": "^10.2.0", "mini-css-extract-plugin": "^2.4.3", "postcss": "^8.3.10", "postcss-loader": "^6.2.0", "postcss-preset-env": "^6.7.0", "style-loader": "^3.3.1", "url-loader": "^4.1.1", "webpack": "^5.59.1", "webpack-cli": "^4.9.1" }, "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }, "eslintConfig": { "extends": "airbnb-base" } }