Webpack從入門到入土的晉級(jí)之路

大一統(tǒng)的模塊化規(guī)范–ES6模塊化

打開終端，輸入命令：

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

安裝完畢之后，輸入命令安裝：

npm install --save @babel/polyfill

項(xiàng)目根目錄創(chuàng)建babel.config.js文件，內(nèi)部代碼如下

const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] //暴露 module.exports = { presets }

創(chuàng)建一個(gè)測(cè)試文件（隨便打印點(diǎn)東西就行）

//創(chuàng)建了index.js文件 console.log('ok');

在終端執(zhí)行命令

npx babel-node ./index.js

默認(rèn)導(dǎo)出語法：

export default { 成員A, 成員B, ... }

使用方法

let num = 10; let cnt = 2; export default { num }//只暴露num

默認(rèn)導(dǎo)入語法

注意：接收名稱是自己定的，在當(dāng)前文件中使用的名稱

// import 接收名稱 from "模塊標(biāo)識(shí)符" import index from './index.js' console.log(index);// { num: 10 }

注意：在一個(gè)模塊中，只允許使用export default向外默認(rèn)暴露一次成員，不能寫多個(gè)export default，否則會(huì)報(bào)錯(cuò)

小tip：

如果在一個(gè)模塊中沒有向外暴露成員，其他模塊引入該模塊時(shí)將會(huì)得到一個(gè)空對(duì)象

在導(dǎo)出的函數(shù)中能夠讀取到?jīng)]有被導(dǎo)出的值

//index.js文件 let num = 10; let cnt = 2; function showCnt() { console.log(cnt); } export default { num, showCnt, }//這里的cnt并沒有被導(dǎo)出 //m1.js文件 import index from './index.js' index.showCnt();// 2

按需導(dǎo)出語法

export let age = 998; export let name = 'ljc'

按需導(dǎo)入語法

import {age, name} from './m2.js' console.log(name + age);// ljc19

導(dǎo)出名需要和屬性名相對(duì)應(yīng)，可以通過as來設(shè)置別名，例如：

import {age ,name as nickname} from './m2.js' console.log(nickname + age);//ljc19

這樣就實(shí)現(xiàn)了設(shè)置別名，設(shè)置別名后原先的名字就不能用了

默認(rèn)和按需兩種方法共存

//m2.js文件 導(dǎo)出 export let age = 19; export let name = 'ljc' let sex = '男' export default { sex } //m1.js文件 導(dǎo)入 import m2, {age, name as nickname} from './m2.js' console.log(m2);// { sex: '男' } console.log(nickname + age); //ljc19

注意：一個(gè)模塊中既可以按需導(dǎo)入導(dǎo)出也可以默認(rèn)導(dǎo)入導(dǎo)出

import "./m2.js";

直接執(zhí)行，不接收模塊中暴露成員

webpack正文

webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優(yōu)化等特性，提高了開發(fā)效率和項(xiàng)目的可維護(hù)性

從實(shí)戰(zhàn)中學(xué)習(xí)更加有意義，之前看了很多個(gè)講師的視頻，有點(diǎn)枯燥無厘頭了，聽完了完全不知道學(xué)到了什么

創(chuàng)建項(xiàng)目目錄并初始化

終端運(yùn)行npm init -y命令，作用是初始化包管理器配置文件package.json

項(xiàng)目目錄

src --> index.html //新建src文件夾下創(chuàng)建index文件

創(chuàng)建首頁及js文件

寫一下隔行變色項(xiàng)目的結(jié)構(gòu)，然后在src目錄下創(chuàng)建index.js文件

安裝jQuery

終端輸入命令npm install jquery -S

注意：這里是jquery不是jQuery

導(dǎo)入jQuery

import $ from "jquery"; $(function(){ $('li:odd').css('backgroundColor','pink'); $('li:even').css('backgroundColor','blue') })

此時(shí)項(xiàng)目運(yùn)行會(huì)報(bào)錯(cuò)，原先是第一行的代碼屬于ES6語法，瀏覽器存在兼容性問題

因此我們通過webpack將代碼轉(zhuǎn)化為瀏覽器能夠兼容的代碼

這部分學(xué)了n遍了，所以筆記有點(diǎn)預(yù)知未來的感覺，希望這次能有好結(jié)果

運(yùn)行 npm install webpack webpack-cli –D 命令，安裝 webpack 相關(guān)的包

在根目錄下創(chuàng)建webpack.config.js文件，在執(zhí)行webpack時(shí)會(huì)優(yōu)先從用戶自定義的配置文件中調(diào)用

在配置文件中寫以下代碼，

注意：mode的意思是文件導(dǎo)出格式，有生產(chǎn)模式和開發(fā)模式，生產(chǎn)模式的代碼會(huì)進(jìn)行壓縮，去掉所有空格之類的，代碼文件小，但是不利于我們的學(xué)習(xí)，因此在學(xué)習(xí)的時(shí)候還是設(shè)置為開發(fā)模式

這個(gè)配置文件在后面的學(xué)習(xí)中還會(huì)添加大量的內(nèi)容

module.exports = { mode:"development"http://可以設(shè)置為development(開發(fā)模式)，production(發(fā)布模式) }

修改package.json文件，添加一點(diǎn)東西

//未添加 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", } //添加后 "scripts":{ "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack" }

script對(duì)象下的配置屬性，可以通過 npm run 運(yùn)行

例如：npm run dev，運(yùn)行dev啟動(dòng)webpack服務(wù)進(jìn)行項(xiàng)目打包

如果這里報(bào)錯(cuò)

請(qǐng)檢查兩個(gè)index文件是否存在于src目錄下

可能是安裝jquery的時(shí)候打了大寫的Q

在執(zhí)行完命令后，我們會(huì)發(fā)現(xiàn)項(xiàng)目目錄下多了個(gè)dist文件夾，這個(gè)文件夾存放的是通過webpack打包后的文件，也就是我們這個(gè)項(xiàng)目中轉(zhuǎn)為為瀏覽器兼容的代碼，因此我們將這個(gè)文件引入我們的index.html文件即可。

通俗點(diǎn)說就是，這個(gè)是轉(zhuǎn)化好的文件，實(shí)現(xiàn)的效果和我們先前寫的一樣，但是這個(gè)文件實(shí)現(xiàn)了兼容，所以我們引用的時(shí)候，引用這個(gè)文件就好

默認(rèn)會(huì)將src/index.js 作為默認(rèn)的打包入口js文件，默認(rèn)會(huì)將dist/main.js 作為默認(rèn)的打包輸出js文件

我們可以通過配置之前所創(chuàng)建的配置文件(webpack.config.js)來自定義出入口文件

const path = require('path');//導(dǎo)入node.js中操作路徑的模塊 module.exports = { entry: path.join(__dirname,"./src/index.js"),//設(shè)置入口文件路徑，絕對(duì)路徑 //配置出口文件 output:{ path:path.join(__dirname,"./dist"),//設(shè)置路徑 filename:"res.js"http://設(shè)置導(dǎo)出文件名稱 }, //模式選擇 mode: "development" }

在上面的代碼中我們引用了node中的path模塊，path.join()用于連接路徑，會(huì)正確地使用當(dāng)前系統(tǒng)的路徑分隔符，也就是絕對(duì)路徑

注意：在上面代碼中的出入口文件路徑，需要根據(jù)自己的文件目錄來寫，cv大概率報(bào)錯(cuò)噢

我們每次修改代碼都要重新打包，太麻煩了，因此需要自動(dòng)打包

安裝自動(dòng)打包工具

npm install webpack-dev-server -D

修改package.json文件中的dev指令，也就是我們自己先前添加的那個(gè)屬性（4.x版本）

//修改前 "dev": "webpack" //修改后 "dev": "webpack-dev-server"

注意：如果使用的webpack版本是5.x的，則需要將上面的配置文件修改為"dev": "webpack server"，否則報(bào)錯(cuò)?；蛘呤褂胣px webpack serve運(yùn)行

webpack版本可以通過終端命令webpack -v查看

運(yùn)行npm run dev，進(jìn)行打包

在運(yùn)行結(jié)果中，有相關(guān)的信息

i ?wds?: Project is running at http://localhost:8080/ i ?wds?: webpack output is served from /

第一行是服務(wù)器的地址，我們可以訪問這個(gè)地址來運(yùn)行我們的網(wǎng)頁

第二行是文件的輸出路徑為/，這個(gè)意思是存放到了服務(wù)器的根目錄中

注意：webpack server自動(dòng)打包的輸出文件，默認(rèn)放到了服務(wù)器的根目錄中

這些地址文件目錄，我們都可以通過配置文件來更改

記得要將js文件引入頁面中，通過第4步知道，文件存放于服務(wù)器的根目錄中，因此

webpack server 會(huì)啟動(dòng)一個(gè)實(shí)時(shí)打包的http服務(wù)器

輸出文件放在了服務(wù)器中，在項(xiàng)目目錄中看不見，不太友好

利用這個(gè)插件生成一個(gè)預(yù)覽頁面，解決我們?cè)谠L問8080時(shí)，直接看到的不是頁面的問題

安裝包html-webpack-plugin

npm install html-webpack-plugin -D

修改配置文件

引入下載好的包，配置相應(yīng)文件

//導(dǎo)入包 const HtmlWebpackPlugin = require("html-webpack-plugin"); //創(chuàng)建對(duì)象 const htmlPlugin = new HtmlWebpackPlugin({ //設(shè)置生成預(yù)覽頁面的模板文件 template:"./src/index.html", //設(shè)置生成的預(yù)覽頁面名稱 filename:"index.html" })

在這個(gè)對(duì)象中，新增plugins屬性，把實(shí)例化好的對(duì)象放進(jìn)去

注意：plugins有s

module.exports = { ... plugins:[ htmlPlugin ] }

在很多視頻中都是先把這個(gè)配置文件的大體寫出來的，這個(gè)視頻不是，有點(diǎn)不習(xí)慣

再次更改package.json文件中的dev屬性

"dev": "webpack server --open --host 127.0.0.1 --port 9999"

--open是自動(dòng)啟動(dòng)

--host是指定地址

--port是指定服務(wù)端口號(hào)

也有另一種方法是通過修改webpack.config.js配置文件

添加一個(gè)devServer屬性，配置相關(guān)信息

module.exports = { ... output:{}, devServer: { port: 3030, publicPath: './dist' }, }

這個(gè)真的超級(jí)常用，默認(rèn)情況下，webpack只能打包js文件，如果想要打包非js文件，需要調(diào)用loader加載器才能打包

less-loader 可以打包處理 .less 相關(guān)的文件

sass-loader 可以打包處理 .scss 相關(guān)的文件

url-loader 可以打包處理 css 中與 url 路徑相關(guān)的文件

loader調(diào)用過程

注意：使用npm run dev是為了實(shí)時(shí)觀看頁面，但是不會(huì)生成文件，只是一個(gè)預(yù)覽效果，所以我們要生成文件的時(shí)候需要使用webpack命令打包

安裝loader包

npm install style-loader css-loader -D

在 webpack.config.js 的 module -> rules 數(shù)組中，添加 loader 規(guī)則如下內(nèi)容如下

output: {...}, module: { rules :[ { test:/\.css$/,//匹配css文件，匹配成功使用下面的loader use:[ 'style-loader', 'css-loader' ] } ] },

注意：

use 數(shù)組中指定的 loader 順序是固定的

多個(gè) loader 的調(diào)用順序是：從后往前調(diào)用

loader的擺放順序出錯(cuò)可能會(huì)報(bào)錯(cuò)

打開終端，運(yùn)行命令，下載less-loader

npm i less-loader less -D

添加配置文件，匹配less文件，使用loader加載

{ test:/\.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] }

其實(shí)這部分理解了之后會(huì)很簡(jiǎn)單，上面這段代碼我們可以接在處理css文件后面繼續(xù)寫，也就是可以理解為rules數(shù)組存放大量的規(guī)則，每個(gè)規(guī)則都是一個(gè)包含test和use的對(duì)象，這樣就很清晰了

這一部分內(nèi)容我是沒有成功的，查了很多資料都沒有成功，視頻課程講解的webpack版本是4.x，我用的是5.x，有些東西被棄用了，安裝==不成功==，所以可以跳過這部分

打開終端，運(yùn)行命令，下包

npm i sass-loader node-sass -D

配置規(guī)則，繼續(xù)在rules中添加配置

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader' ] }

打開終端，運(yùn)行命令

npm install --save-dev mini-css-extract-plugin

引入

//css提取成單獨(dú)文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

更改用戶配置

//更改css相關(guān)配置 { test: /\.css$/, use: [ //這里改以下 MiniCssExtractPlugin.loader, 'css-loader' ] } //創(chuàng)建插件對(duì)象 plugins: [ htmlPlugin, new MiniCssExtractPlugin() ]

這個(gè)是真的香

打開終端，運(yùn)行命令，安裝loader

npm install postcss-loader autoprefixer -D

在項(xiàng)目根目錄創(chuàng)建并配置postcss.config.js文件

const autoprefixer = require("autoprefixer");//引入 module.exports = { plugins:[ autoprefixer ] }

配置規(guī)則，更改rules數(shù)組

//更改css相關(guān)配置 { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', //在這里添加新的loader規(guī)則 'postcss-loader' ] }

webpack4使用optimize-css-assets-webpack-plugin插件，方法和上面的都一樣，引入，然后創(chuàng)建實(shí)例對(duì)象

下面記錄webpack5的使用

打開終端，安裝插件

npm install css-minimizer-webpack-plugin --save-dev

引入創(chuàng)建插件對(duì)象

//引入 const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin'); ... //在plugins數(shù)組中創(chuàng)建 plugins: [ htmlPlugin, new MiniCssExtractPlugin(), new CSSMinimizerWebpackPlugin() ]

在樣式表css中有時(shí)候會(huì)設(shè)置背景圖片和設(shè)置字體文件，一樣需要loader進(jìn)行處理

使用url-loader和file-loader來處理打包圖片文件以及字體文件

打開終端，安裝loader

npm install url-loader file-loader -D

配置loader文件

{ test:/\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, use:"url-loader?limit= 8 * 1024" }

注意：

css樣式表中的文件才會(huì)通過這個(gè)插件被打包

?limit后面填的是字節(jié)大小，只有小于這個(gè)數(shù)的才會(huì)被直接打包，存放的是你自己寫的那個(gè)路徑，大于這個(gè)數(shù)，會(huì)轉(zhuǎn)化為base64路徑

在上一步中已經(jīng)安裝好了loader，添加配置文件即可

{ exclude:/\.(css|js|html|less|jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/,//排除這些文件 loader:'file-loader', options: { name: '[hash:10].[ext]'//縮短文件名 } }

打開終端，安裝babel

npm install babel-loader @babel/core @babel/runtime -D

安裝babel語法插件包

npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在項(xiàng)目根目錄創(chuàng)建并配置babel.config.js文件

module.exports = { presets:["@babel/preset-env"], plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ] }

更改用戶配置文件中的rules，數(shù)組下繼續(xù)添加

{ test:/\.js$/, use:"babel-loader", //use表示該文件類型需要調(diào)用的loader exclude:/node_modules/ }

css文件：

在實(shí)例化的時(shí)候添加參數(shù)配置

new MiniCssExtractPlugin({ filename: 'css/[name].css' })

圖片文件

在rules中添加options配置內(nèi)容

{ test: /\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, use: [{ loader: "url-loader", options: { limit: 8 * 1024, name: '[hash:10].[ext]', esModule: false, outputPath: './imgs', publicPath: './imgs' // 開發(fā)環(huán)境配置 } }] }

和上面一樣添加插件配置

其實(shí)就是配置刪除空格和注釋

// const htmlPlugin = new HtmlWebpackPlugin({ //設(shè)置生成預(yù)覽頁面的模板文件 template: "./src/index.html", //設(shè)置生成的預(yù)覽頁面名稱 filename: "index.html", //添加壓縮代碼 collapseWhitespace: true, removeComments: true, options: { esModule: false } })

const path = require('path'); //導(dǎo)入node.js中操作路徑的模塊 //導(dǎo)入html包 const HtmlWebpackPlugin = require("html-webpack-plugin"); //創(chuàng)建對(duì)象 const htmlPlugin = new HtmlWebpackPlugin({ //設(shè)置生成預(yù)覽頁面的模板文件 template: "./src/index.html", //設(shè)置生成的預(yù)覽頁面名稱 filename: "index.html", //壓縮代碼 // collapseWhitespace:true, // removeComments:true, options: { esModule: false } }) //css提取成單獨(dú)文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //css壓縮 const CSSMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin'); module.exports = { entry: path.join(__dirname, "./src/js/index.js"), //設(shè)置入口文件路徑 //配置出口文件 output: { path: path.join(__dirname, "./dist"), //設(shè)置路徑 filename: "js/bundle.js" //設(shè)置導(dǎo)出文件名 }, module: { rules: [{ //處理css test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader' ] }, { //處理less test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, { //處理scss，不用 test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader' ] }, { //處理圖片 test: /\.(jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, use: [{ loader: "url-loader", options: { limit: 8 * 1024, name: '[hash:10].[ext]', esModule: false, outputPath: './imgs', publicPath: '../imgs' // 公共路徑 } }] }, { //處理其他資源 exclude: /\.(css|js|html|less|jpg|png|gif|bmp|ttf|eot|svg|woff|woff2)$/, loader: 'file-loader', options: { name: '[hash:10].[ext]', outputPath: 'media', publicPath: '../media' // 開發(fā)配置或者就行 } }, { //轉(zhuǎn)化高級(jí)js代碼 test: /\.js$/, use: "babel-loader", exclude: /node_modules/ } ] }, devServer: { //服務(wù)器相關(guān)配置 port: 9999, open: true }, target: 'web',//實(shí)時(shí)刷新 devtool: "eval-source-map", //后面會(huì)寫到 plugins: [ htmlPlugin, new MiniCssExtractPlugin({ filename: 'css/[name].css' }), new CSSMinimizerWebpackPlugin() ], //模式選擇 mode: "development" }

性能優(yōu)化配置

HMR對(duì)html，css，js都有不同的配置，js，和html文件默認(rèn)是不使用HMR功能的

問題：如果我們只是修改了樣式文件，沒有被修改過的js等文件也會(huì)因?yàn)轫撁娴乃⑿露恢匦录虞d一次，所有的代碼被重新執(zhí)行一次即，這種情況往往不是我們想要的效果

解決方法：使用HMR功能來完成這個(gè)需求。它的作用是當(dāng)一個(gè)模塊發(fā)生變化，只會(huì)重新打包這一個(gè)模塊，而不是打包加載所有模塊`，極大提升構(gòu)建速度

devServer: { port: 9999, open: true, // 開啟HMR功能 // 新配置要想生效，必須重新webpack服務(wù) // 重新執(zhí)行npx webpack server指令 hot: true }

HMR功能開啟后當(dāng)我們修改樣式文件，我們?cè)诳刂婆_(tái)上可以發(fā)現(xiàn)此時(shí)只有該樣式文件被重新加載刷新了，其他的文件不會(huì)重新輸出。

注意：

對(duì)于html文件不需要做HMR功能，因?yàn)橹挥幸粋€(gè)html文件，只要修改了，必定重新加載

js文件用HMR感覺不太友好

if (module.hot) { // 一旦 module.hot 為true，說明開啟了HMR功能。 // 額外添加下面的JS代碼 // 讓HMR功能代碼在此JS文件修改時(shí)生效 module.hot.accept('./print.js', function() { // 方法會(huì)監(jiān)聽 print.js 文件的變化 // 一旦發(fā)生變化，其他模塊不會(huì)重新打包構(gòu)建。 // 會(huì)執(zhí)行后面的回調(diào)函數(shù) print();//這是一個(gè)js文件下的函數(shù) }); }

source-map是一種提供源代碼到構(gòu)建后代碼映射技術(shù)，簡(jiǎn)單來說就是配置文件報(bào)錯(cuò)的提示方式，在配置文件中配置devtool即可

devServer: {}, target: 'web',//實(shí)時(shí)刷新 devtool: "eval-source-map"

直接配置在export對(duì)象下

對(duì)于devtool配置有兩種方案，內(nèi)聯(lián)和外聯(lián)

內(nèi)聯(lián)和外部的區(qū)別：

外聯(lián)生成了文件，內(nèi)聯(lián)不生成

內(nèi)聯(lián)構(gòu)建速度更快，但是文件體積會(huì)更大

這里的配置選項(xiàng)相當(dāng)多，可以直接查看devtool

開發(fā)環(huán)境

需要考慮速度快，調(diào)試更友好

推薦使用：eval-source-map（√） / eval-cheap-module-source-map

生產(chǎn)環(huán)境

內(nèi)聯(lián)會(huì)讓代碼體積變大，所以在生產(chǎn)環(huán)境不用內(nèi)聯(lián)

推薦使用：source-map（√）

在我們之前寫的rules中，每一個(gè)文件都會(huì)被所有的規(guī)則判斷一遍，這樣的操作是沒有必要的

因此我們使用oneOf來解決這個(gè)問題，優(yōu)化我們的打包代碼

在所有的rules外層用一個(gè)oneof數(shù)組包裹，也就是將我們之前寫的規(guī)則放在oneof數(shù)組中，oneof數(shù)組放在rules數(shù)組對(duì)象中

rules: [ { oneOf:[...相關(guān)loader] } ]

如果有需要匹配兩次以上的，需要將對(duì)應(yīng)的loader放在外部，和oneOf數(shù)組存在的對(duì)象同級(jí)，可以通過添加enforce: 'pre'屬性，優(yōu)先執(zhí)行這個(gè)規(guī)則

到這里其實(shí)后面還有很多的優(yōu)化沒有寫，但是真的有點(diǎn)枯燥，很多人說利用vue腳手架，能很輕松的解決掉了，所以我想webpack學(xué)習(xí)就先到這里吧，已經(jīng)花費(fèi)了太多的時(shí)間了，需要學(xué)習(xí)一些其他的東西，或者做一些demo來練習(xí)以下了！

總結(jié)

學(xué)習(xí)webpack的時(shí)間持續(xù)了非常久，在b站上也看了有4，5個(gè)老師的webpack視頻了，都是看完的那種，但是學(xué)到的東西很有限，基本上都是一些簡(jiǎn)單的配置教程，講講一些loader，插件的安裝，好用是真的好用，但是感覺還是差點(diǎn)意思。雖然webpack真的非常好，但是對(duì)于在網(wǎng)絡(luò)視頻中學(xué)習(xí)webpack可以說是掉了大坑，很多講師使用的webpack版本都是4.x版本的，現(xiàn)在2021年，一般新安裝的話都是直接安裝5.x版本，在最新的版本中有很多的東西廢棄掉了，導(dǎo)致了在跟著老師敲代碼的過程中，會(huì)有很多很多很多奇奇怪怪的報(bào)錯(cuò)，導(dǎo)致學(xué)習(xí)的周期無限拉長(zhǎng)，講真，我花了一大半的時(shí)間在查找怎么解決這些bug身上，在各大開發(fā)者社區(qū)上查找相關(guān)的解決方法，真的是大海撈針，雖然有很多解決方案，但是由于博客時(shí)間久遠(yuǎn)，這個(gè)解決方案也被官方廢棄了（就很離譜），學(xué)到這里，我覺得最有效解決問題的方法是查看官方文檔webpack，雖然官方文檔真的很官方，我剛開始也看不下去，但是慢慢看下去之后，會(huì)發(fā)現(xiàn)其實(shí)這些也是能看的明白的！總之學(xué)習(xí)webpack真的需要很多的精力，有不明白的地方多查看官方文檔，或者還是查查博客的。

JavaScript webpack

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。