webpack -- 環境配置 · 編程開發筆記

> ## :-: Git命令行操作 ``` 打包(壓縮) webpack demo.js -o demo.min.js 打包為生產環境(不壓縮) webpack demo.js -o demo.min.js --mode development 初始化工程 npm init 按配置文件下載 cnpm install 下載安裝指定模塊 cnpm install jquery tree shaking -- 抖掉沒有使用到的代碼 (js/css) - webpack 默認用的是 webpack.config.js 的配置文件。 $ webpack - 可以指定webpack使用哪個配置文件(webpack-dev.config.js)進行打包。 $ webpack --config webpack-dev.config.js ``` > ## :-: 環境配置 (package.json) :-: * 使用前需要把注解清除掉，否則會報錯 ``` // 首先初始化工程 npm init -y // 會生成 package.json 文件，對其進行配置、 { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", // scripts -- 配置開發環境 "scripts": { // npm run run "run": "webpack", // npm run dev ---> 打包為開發環境 "dev": "webpack --mode development --color", // 配置生產環境 // npm run prod ---> 打包為生產環境 "prod": "webpack --mode production --color", // 命令：npm run demo "demo": "webpack --config webpack-prod.config.js", "server": "webpack-dev-server --open --color" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.2.0", "file-loader": "^4.2.0", "glob-all": "^3.1.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "imagemin": "^7.0.0", "imagemin-pngquant": "^8.0.0", "img-loader": "^3.0.1", "less": "^3.10.3", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.8.0", "purify-css": "^1.2.5", "purifycss-webpack": "^0.7.0", "purifycss-webpack-plugin": "^2.0.3", "style-loader": "^1.0.0", "url-loader": "^2.1.0", "webpack": "^4.39.3", "webpack-cli": "^3.3.7", "webpack-deep-scope-plugin": "^1.6.2", "webpack-dev-server": "^3.8.0" } } ``` > ## :-: [webpack配置文件](https://www.webpackjs.com/concepts/configuration/#基本配置) (webpack.config.js) ``` // webpack.config.js 文件遵循的是 CommonJs規范 // 在node中獲取path方法、路徑 const path = require("path"); const glob = require("glob-all"); // glob-all -- 全局匹配(需要下載)。purifycss-webpack -- css tree shaking 依賴 // 引入插件(需要 cnpm install xxx 下載) // html-webpack-plugin -- HTML插件，可以抽離出HTML文件 const HtmlWebpackPlugin = require("html-webpack-plugin"); // webpack-deep-scope-plugin -- js深度tree shaking插件，該插件可以通過作用域分析消除無用代碼(深度tree shaking) const webpackDeepScopeAnalysisPlugin = require("webpack-deep-scope-plugin") .default; // ----- 報錯 // // mini-css-extract-plugin -- 單獨抽離css文件的插件。 // const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // purifycss-webpack -- css tree shaking插件(使用方法：https://www.npmjs.com/package/purifycss-webpack) const PurifyCSSPlugin = require('purifycss-webpack'); // CSS加前綴(兼容處理)的插件：cnpm install postcss postcss-loader autoprefixer cssnano postcss-cssnext -D // clean-webpack-plugin -- 刪除上一次打包的dist目錄 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // ----- 報錯 // // webpack -- 內置插件 // const webpack = require("webpack"); // webpack-dev-server -- 開啟本地服務器(需要下載全局跟局部的，不然會報錯) // $ cnpm install webpack-dev-server -g // $ cnpm install webpack-dev-server -D module.exports = { // 配置要打包的模式(mode) // 生產環境(會壓縮) -- 'production' // 開發環境(不壓縮) -- 'development' mode: "production", // entry -- 入口配置 // 單入口配置：entry: './entry.js', // 多入口配置：entry: { pageA:'./src/entry/pageA.js', pageB:'./src/entry/pageB.js' } entry: { index: "./src/entry/index.js", pageA: "./src/entry/pageA.js", pageB: "./src/entry/pageB.js" }, // output -- 輸出配置 output: { // path -- 是node中支持的變量、 // __dirname -- 當前目錄路徑、 // 輸出的文件目錄，沒有則創建 -- path.resolve(__dirname, 'dist') path: path.resolve(__dirname, "dist"), // filename -- 輸出的文件名(String) // 單入口配置：filename: 'index.bundle.js' // 多入口配置：filename: '[name] - [hash:5].bundle.js' // [name] -- 可以根據entry對象的屬性名打包成多個文件、否則都打包成一個文件、 // [hash:5] -- 5位哈希值 filename: "[name] - [hash:5].bundle.js", // 配置導出的公共js模塊文件、 chunkFilename: "[name] - [hash:5].commonality.js" }, optimization: { // 配置分離包 webpack新特性 splitChunks: { // 緩存的 cacheGroups: { // 抽離出來的模塊名字、 common: { // 名字 name: "common", // 最小體積 -- 能被單獨抽離出來的最小體積，默認30kb (30000) minSize: 1, // 最小次數 -- 被引入多少次，才屬于公共的js模塊、 minChunks: 2, // 在那些范圍內，進行尋找公共的js模塊 chunks: "all", // 優先級 priority: 1 }, vendor: { // 名字 name: "vendor", // 正則匹配 test: /[\\/]node_modules[\\/]/, // 在那些范圍內，進行尋找公共的js模塊 chunks: "all", // 優先級 priority: 10 } } } }, // 模塊(module) --- 引入loader處理文件(loader可以將所有類型的文件轉換為webpack能夠處理的有效模塊)、 module: { // loader：webpack自身只理解JavaScript，通過loader可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊。 // loader基本格式：rules: [ { test: /\.txt$/, use: 'raw-loader' } ] rules: [ // test -- 被處理,正則匹配文件名 use -- 使用什么loader (從后往前執行) // { test: /\.txt$/, use: 'raw-loader' } // loader說明：將less文件解析成css行間樣式。 // 下載依賴：cnpm install style-loader css-loader less --save-dev // 1. less-loader -- less解析 // 2. css-loader -- 解析成css // 3. style-loader -- 變成行間樣式 // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // loader說明：將less文件解析成css，并單獨抽離出css文件。 // 下載依賴：cnpm install mini-css-extract-plugin css-loader less --save-dev // 1. less-loader -- less解析 // 2. css-loader -- 解析成css // 3. MiniCssExtractPlugin.loader -- 單獨抽離出css文件 // { // // test -- 正則匹配文件名，被處理的文件 // test: /\.less$/, // // use -- 使用什么loader (從后往前執行) // // mini-css-extract-plugin -- 單獨抽離css文件的插件。 // use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] // }, // loader說明：對圖片進行處理 { test: /\.(jpg|png|jpeg|gif)$/, use: [ { // 圖片解析 loader: "url-loader", // options -- 更加詳細的配置 options: { // [name] -- 用之前的文件名 // [hash:5] -- 5位哈希值 // [ext] -- 還是用之前的格式 name: "[name] - [hash:5].[ext]", // 限制圖片大小 <= 50kb 進行base64編碼，若大于則被單獨抽離成文件。 limit: 50000, // outputpath -- 輸出的路徑(文件夾) outputpath: "img" } }, { // img-loader -- 用于圖片的壓縮 loader: "img-loader", options: { plugins: [ // 不同格式要用不同的參數 require("imagemin-pngquant")({ // quality -- 壓縮的質量(0~1) 0 是最小的，1 是最完美的、 quality: [0.3, 0.5] }) // 針對不同格式的圖片處理。 // require("imagemin-gifsicle")({ // interlaced: false // }), // require("imagemin-mozjpeg")({ // progressive: true, // arithmetic: false // }), // require("imagemin-pngquant")({ // floyd: 0.5, // speed: 2 // }), // require("imagemin-svgo")({ // plugins: [{ removeTitle: true }, { convertPathData: false }] // }) ] } } ] }, // html-loader -- 專門處理HTML中的一些屬性。 { test: /\.html$/, use: [ { loader: "html-loader", options: { attrs: ["img:src"] } } ] } ] }, // 插件(plugins) plugins: [ // 注意css抖動需要放到js之前，否則會報錯誤、 // clean-webpack-plugin -- 刪除上一次打包的dist目錄 new CleanWebpackPlugin(), // purifycss-webpack -- css tree shaking插件 new PurifyCSSPlugin({ // paths -- 需要匹配對比的文件(html、js) paths: glob.sync([ path.join(__dirname, "./*.html"), path.join(__dirname, "./src/entry/index.js"), path.join(__dirname, "./src/entry/pageA.js"), path.join(__dirname, "./src/entry/pageB.js") ]) }), // mini-css-extract-plugin -- 單獨抽離css文件的插件。 // new MiniCssExtractPlugin({ filename: "[name] - [hash:5].css" }), // new MiniCssExtractPlugin({ // // 選項類似于webpackOptions.output中的相同選項 // // 所有選項都是可選的 // filename: '[name].css', // chunkFilename: '[id].css', // ignoreOrder: false, // 啟用刪除關于沖突順序的警告 // }), // js深度tree shaking 插件 new webpackDeepScopeAnalysisPlugin(), // // html-webpack-plugin -- HTML插件，可以抽離出HTML文件 new HtmlWebpackPlugin({ // 默認 -- 生成的index.html文件名 filename: "index.html", // 模板 template: "./index.html", // 修改html標題 title: "myApp", // minify -- 配置壓縮 minify: { // removeComments -- 是否清理注釋 removeComments: true, // collapseWhitespace -- 是否清理空格/換行 collapseWhitespace: true } }), // // webpack.HotModuleReplacementPlugin -- 引入內置熱更新插件 // new webpack.HotModuleReplacementPlugin() ], // 開啟服務器監聽、命令：webpack-dev-server --open --color devServer: { // 配置端口號 port: "9091", // 默認打開的路徑 contentBase: "dist", // 開啟熱更新依賴：new webpack.HotModuleReplacementPlugin() // 僅支持css行間樣式(style-loader)，不支持單獨抽離css、 // 正常情況下也不支持js文件熱更新。可以在主入口中寫入 if(module.hot)module.hot.accept(); 使其支持熱更新。 hot: true } }; ```