webpack4配置基础
前言
為什么要使用構(gòu)建工具？
1.轉(zhuǎn)換ES6語法（很多老版本的瀏覽器不支持新語法） 2.轉(zhuǎn)換JSX? 3.CSS前綴補(bǔ)全/預(yù)處理器? 4.壓縮混淆（將代碼邏輯盡可能地隱藏起來）? 5.圖片壓縮? 6.?....
為什么選擇webpack？
基礎(chǔ)概念
默認(rèn)的配置文件是weback.config.js，在package.json中配置腳本可以通過webpack --config來指定構(gòu)建使用的配置文件。
初始化
創(chuàng)建并進(jìn)入新的目錄，執(zhí)行如下命令，初始化package.json文件，這是一個(gè)模塊的描述文件，-y的意思是所有配置都是yes
npm init -y安裝webpack
npm install webpack webpack-cli --save-dev核心概念
先看一下一份最簡(jiǎn)單的webpack配置是什么樣的
const path = require('path');module.exports = {entry: './src/index.js', // 打包的入口文件output: { // 打包后的輸出filename: "bundle.js",path: path.join(__dirname, "/dist")},mode: 'development', // 所處環(huán)境module: {rules: [{test: /\.js$/,use: "babel-loader"},......]},plugins: [new HtmlWebpackPlugin(),] };entry
打包的入口文件?
單入口：
entry: "./src/index.js"多入口（適用于多頁(yè)面場(chǎng)景）：
entry: {app: "./src/app.js",adminApp: "./src/adminApp.js", }output
打包之后的輸出
單輸出：
output: {filename: "bundle.js",path: __dirname + "/dist" }多輸出：
output: {filename: "[name].js", // 占位符[name]代表entry中的keypath: __dirname + "/dist" }Loaders
webpack只支持JS和JSON兩種文件類型，要想支持其他文件類型且轉(zhuǎn)化成有效的模塊，需要通過Loaders。Loaders本身是一個(gè)函數(shù)，接收源文件做參數(shù)，返回轉(zhuǎn)換的結(jié)果。
常見的Loaders
babel-loader 轉(zhuǎn)換ES6/ES7等語法 css-loader 支持.css文件的加載和解析 less-loader 將less文件轉(zhuǎn)換成css ts-loader 將TS轉(zhuǎn)換成js file-loader 將圖片、字體等的打包 raw-loader 將文件以字符串的形式導(dǎo)入 thread-loader 多線程打包JS和CSSPlugins
插件用于打包文件的優(yōu)化，資源管理和環(huán)境變量注入，作用于整個(gè)構(gòu)建過程。也可以理解為L(zhǎng)oaders無法完成的事情都可以用Plugins完成。
常見的Plugins：
CommonsChunkPlugin 常用于多頁(yè)面打包情況下，將多個(gè)頁(yè)面公用的js代碼塊提取成公共js CleanWebpackPlugin 清理構(gòu)建目錄 ExtractTextWebpackPlugin 將CSS從bundle文件里提取成一個(gè)獨(dú)立的CSS文件 CopyWebpackPlugin 將文件或文件夾拷貝到夠賤的輸出目錄 HtmlWebpackPlugin 創(chuàng)建html文件去承載輸出的bundle。這個(gè)非常有用，不需要我們手動(dòng)去創(chuàng)建html文件 UglifyjsWebpackPlugin 壓縮JS ZipWebpackPlugin 將打包的資源生成一個(gè)zip包mode
用來指定當(dāng)前的構(gòu)建環(huán)境，值有 production 、development 、none，默認(rèn)是production。通過mode可以使用webpack內(nèi)置的函數(shù)和功能：
developement
開啟 NamedChunksPlugin 和 NamedModulesPlugin 在代碼熱更新階段，打印哪個(gè)模塊發(fā)生了更新production
開啟 FlagDependencyUsagePlugin , FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin，OccurrenceOrderPlugin , SideEffectsFlagPlugin 和 TerserPluginnone
不開啟任何優(yōu)化webpack基礎(chǔ)功能
解析ES6
使用babel-loader, babel的配置文件是.babelrc, 增加ES6的babel preset配置
1.安裝包
npm install @babel/core @babel/preset-env babel-loader -D2.創(chuàng)建.babelrc文件，并添加配置
{"presets": ["@babel/preset-react","@babel/preset-env"] }3.webpack.config.js配置
module: {rules: [{test: /\.js$/,use: "babel-loader", // 用來解析ES6},] },解析JSX
增加babel preset配置：
"@babel/preset-react"要在React中使用箭頭函數(shù)，需要安裝插件
npm i @babel/plugin-proposal-class-properties // .babelrc "plugins": ["@babel/plugin-proposal-class-properties" ]解析CSS/CSS預(yù)處理/前綴補(bǔ)全
less-loader 將less轉(zhuǎn)化成css css-loader 讓webpack解析css文件，并轉(zhuǎn)換成commonjs對(duì)象，插入到JS里（因?yàn)閣ebpack本身只支持js和json） style-loader 將樣式通過<style>標(biāo)簽插入到<head>中CSS前綴常見的有：?-ms -moz -webkit -o 需要安裝autoprefixer 和 postcss-loader
npm i autoprefixer postcss-loader配置：
{test: /\.less$/,use: ["style-loader","css-loader",{loader: "postcss-loader",options: {plugins: () => [require('autoprefixer')({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] // 指定所需要兼容瀏覽器的版本})]}},"less-loader",] }, 執(zhí)行順序：less-loader -> postcss-loader -> css-loader -> style-loader解析圖片、字體
file-loader 用于處理文件?js文件中：
import logo from './images/geektime.png' const MyComponent = () => {retrun <img alt="" src={logo} /> }webpack.config.js配置：
{test: /.(png|jpg|gif|jpeg)$/i,use: {loader: "file-loader",options: {name: '[name][hash:8].[ext]' // 重命名打包后的文件}} }很多時(shí)候，前端的圖片請(qǐng)求路徑需要從后端接口獲取，不適用此場(chǎng)景。另外，即使不從后端獲取，靜態(tài)資源也可以用傳統(tǒng)的相對(duì)路徑引用，此時(shí)存在一個(gè)問題，就是打包后的文件夾，與打包前源文件位置不同，相對(duì)靜態(tài)文件的相對(duì)路徑也不同，造成打包后路徑失效，無法引入的情況。我們需要將靜態(tài)文件夾整體復(fù)制到打包后的文件目錄內(nèi)，手工做太麻煩，可以借助插件實(shí)現(xiàn)。
npm i copy-webpack-plugin?webpack.config.js配置：
const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [new CopyWebpackPlugin([{from: './src/static',to: __dirname + './dist/static'}]) ]資源解析
url-loader 也可以處理圖片和字體，可以設(shè)置較小資源自動(dòng) base64。webpack.config.js配置：
{test: /\.(png|svg|jpg|gif)$/,use: [{loader: "url-loader",options: {limit: 1024*5, // 當(dāng)文件小于1024*n字節(jié)，webpack將該資源自動(dòng)轉(zhuǎn)化成base64編碼在js文件中}}] }文件監(jiān)聽
文件監(jiān)聽指在發(fā)現(xiàn)源代碼發(fā)生變化時(shí)，自動(dòng)重新構(gòu)建出新的輸出文件。需要手動(dòng)刷新瀏覽器。
webpack開啟監(jiān)聽模式有兩種方式：
- 命令打包時(shí)帶上 --watch參數(shù)（可以在package.json中配置腳本）
- 配置webpack.config.js中設(shè)置 watch: true
webapck配置：
watch: true, watchOptions: {ignored: /node_modules/, // 不監(jiān)聽的文件或文件夾，默認(rèn)為空。正則匹配/字符串都可aggregateTimeout: 300, // 監(jiān)聽到變化發(fā)生后，延遲300ms再去執(zhí)行，默認(rèn)300mspoll: 1000 // 輪詢頻率，默認(rèn)每秒1000次 },監(jiān)聽原理：輪詢判斷文件的最后編輯時(shí)間是否發(fā)生變化。某個(gè)文件發(fā)生了變化，并不會(huì)立即告訴監(jiān)聽者，而是先緩存起來，等aggregateTimeout時(shí)間過后再構(gòu)建。
熱更新
需要安裝webpack-dev-server，適用于開發(fā)環(huán)境，不輸出文件，將構(gòu)建后的內(nèi)容保存在內(nèi)存中。
在package.json中編寫腳本：
"dev": "webpack-dev-server --open" // open指自動(dòng)打開瀏覽器webpack配置：
devServer: {contentBase: './dist', // 必需port: 8080, // 默認(rèn)8080hot: true // 默認(rèn)true },當(dāng)然，如果使用html-webpack-plugin，則不需要contentBase屬性。
文件指紋策略
作用：
三種hash：
- Hash：和整個(gè)項(xiàng)目的構(gòu)建相關(guān)，只要項(xiàng)目文件有修改，整個(gè)項(xiàng)目構(gòu)建的hash值就會(huì)改變
- Chunkhash：和webpack打包的chunk有關(guān)，不同的entry會(huì)生成不同的chunkhash值，只能在生產(chǎn)環(huán)境中使用
- Contenthash：根據(jù)文本內(nèi)容來定義hash，文件內(nèi)容不變，則contenthash不變
使用：
CSS由于style-loader的存在，被內(nèi)聯(lián)在html中，可以用插件將其獨(dú)立出一個(gè)css文件。
npm install mini-css-extract-pluginconst MiniCssExtractPlugin = require('mini-css-extract-plugin'); plugins: [new MiniCssExtractPlugin({ // 該插件會(huì)將css提取出來并在html中引入獨(dú)立的文件，與style-loader互斥filename: '[name][contenthash:8].css'}); ]JS文件只能使用hash和ChunkHash，CSS建議使用ContentHash
占位符： [ext] 后綴名 [name] 文件名稱 [path] 文件的相對(duì)路徑 [folder] 文件所在的文件夾 [contenthash] 文件的內(nèi)容hash，默認(rèn)是md5生成 [hash] 文件內(nèi)容的hash，默認(rèn)md5生成（注意這里的hash與前面的"hash"意義不一樣） [emoji] 一個(gè)隨機(jī)的只帶文件內(nèi)容的emoji文件壓縮
主要是HTML、CSS、JS的壓縮
JS壓縮：
webpack內(nèi)置了uglifyjs-webpack-plugin，在生產(chǎn)環(huán)境自動(dòng)實(shí)現(xiàn)了JS壓縮
CSS壓縮：
使用optimize-css-assets-webpack-plugin 和 cssnano可以實(shí)現(xiàn)對(duì)CSS文件進(jìn)行壓縮，因?yàn)閟tyle-loader將CSS內(nèi)聯(lián)在html中，需要借助 mini-css-extract-plugin 插件將CSS分離成文件。
HTML壓縮：
html-webpack-plugin設(shè)置壓縮參數(shù)minify，可以將空格、換行和注釋干掉
npm install html-webpack-plugin optimize-css-assets-webpack-plugin cssnano mini-css-extract-pluginconst HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 一個(gè)頁(yè)面對(duì)應(yīng)一個(gè) html-webpack-plugin module: {rules: [{test: /\.less$/,use: [// "style-loader",MiniCssExtractPlugin.loader, // 與style-loader互斥"css-loader",{loader: "postcss-loader",options: {plugins: () => [require('autoprefixer')({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] // 指定所需要兼容瀏覽器的版本})]}},"less-loader",]},] }, new HtmlWebpackPlugin({template: "./src/index.html", // 模板所在路徑filename: "index.html", // 指定打包后的文件名稱// chunks: [''], // 生成的html要鏈入哪些js文件。數(shù)組值對(duì)應(yīng)的是entry中的鍵// inject: true, // 將生成的css等文件自動(dòng)注入到html內(nèi)，默認(rèn)開啟minify: {html5: true,collapseWhitespace: true, // 干掉空格preserveLineBreaks: false, // 干掉換行minifyCSS: true, // 壓縮html內(nèi)的cssminifyJS: true, // 壓縮html內(nèi)的jsremoveComments: true, // 刪除注釋}, }), new MiniCssExtractPlugin({filename: '[name][contenthash:8].css' }), new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano'), }),自動(dòng)清理構(gòu)建目錄
借助 clean-webpack-plugin 每次構(gòu)建都會(huì)自動(dòng)刪除之前的構(gòu)建目錄。默認(rèn)會(huì)刪除output指定的輸出目錄。
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); new CleanWebpackPlugin(),?
轉(zhuǎn)載于:https://www.cnblogs.com/V587Chinese/p/11555241.html
總結(jié)
以上是生活随笔為你收集整理的webpack4配置基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《原神》长篇动画项目官宣！与知名动画公司
- 下一篇： RESTful API概述