目錄
-
◆ 主要內容
✦ Webpack是什麼
✦ Webpack安裝配置
-
◆ Webpack是什麼
現今的很多網頁其實可以看作是功能豐富的應用，他們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區湧現了很多好的實踐方法：
-
Webpack爲什麼使用？
可以看作是模塊打包機:它做的事情是分析你的項目結構，找到JavaScript模塊以及其他一些瀏覽器，不能直接運行的拓展語言（Scss， TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用：
-
Webpack實現過程
把你的項目當做一個整體，通過一個給定的主文件（如index.js ），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理他們，然後打包爲一個（或多個）瀏覽器可識別的JavaScript文件：
總結：就是一個打包工具，打包成瀏覽器識別的處理工具。
-
◆ Webpack安裝配置（實戰1）
1、新建一個目錄名爲webpack-day01，在其下面執行
npm init -y(package.json生成)
2、安裝webpack和webapck-cli
// npm install webpack webpack-cli -D
npm i -D webpack-cli
npm i -D webpack
3、進入webpack配置
（一）webpack可以進行0配置
- 打包工具 -> 輸出後的結果（js模塊）
① 新建打包目錄和文件
./webpack-day01/src/index.js -> console.log('hello')
② 打包測試
npx webpack
2.1 其默認會執行node_module下的bin文件，裏面去解析是否存在node.exe，如果無則用node執行其他步驟
2.2 在僅有package.json和index.js文件執行打包命令之後，會自動生成dist和對應壓縮過後的main.js文件
- 打包 （支持我們js模塊化）
① 新建a文件和引入a文件
./webpack-day01/src/a.js -> module.exports = 'zfpx'
② 打包測試
./webpack-day01/src/index.js ->
let a = require('./a.js'); // 這樣的語法不可能在瀏覽器中跑的,是node的規範,node可以在node中運行,我們需要在瀏覽器中執行哦
console.log(a);
③ 運行打包測試
3.1 新建index.html
./webpack-day01/dist/index.js
3.2 引入mian.js
<script src="./main.js"></script>
3.3 在瀏覽器上預覽控制檯輸出結果
zfpx
④ 總結：
也就是說webpack幫我們去解析了js模塊，並且以當前js爲準查找依賴文件，打包成一個文件，解決了瀏覽器的require問題
問題：我們能否修改上述打包後的文件名稱呢？打包對象呢？答：是可以的。
（二、1）webpack手動配置
- 默認配置文件的名字 -> webpack.config.js
// webpack 是node寫出來的node寫法
let path = require('path');
console.log(path.resolve(__dirname + "/public"));
module.exports = {
mode:'development',// 模式 默認兩種 production development
/* 入口 */
entry: __dirname + "/src/index.js", // 或寫成 entry: "./src/index.js",
output: {
/* 打包後的文件名 */
filename: "bundle.js",
/* 路徑必須是一個絕對路徑,要引入path模塊 */
path: path.resolve(__dirname + "/public"), // path.resolve可以把相對路徑解析成絕對路徑, __dirname指的是當前目錄下產生一個public目錄,不加也行
// 或寫成 path: __dirname + "/public",
}
}
問題：這個名字是從哪裏來的呢？
答：./node_modules/webpack-cli/bin/config/config-yargs.js中Line79行寫着：
...
defaultDescription: "webpack.config.js or webpackfile.js",
requiresArg: true
},
...
但是也可以強制修改名字哦！！
問題：如何使用呢？
答：
1、直接使用
npx webpack --config webpack.config.my.js（npx webpack --config 配置文件名稱）
2、package.json腳本配置
...
"scripts": {
"build": "webpack --config webpack.config.my.js",
...
},
...
控制檯執行npm run build
3、-- --xx 傳參使用
npm run build -- --config webpack.config.my.js
（二、2）webpack手動配置——localhost訪問
前言：此時我們發現必須是本地文件打開瀏覽器才能訪問到結果，如何改成localhost的形式呢？
2.2.1 安裝開發依賴
npm install webpack-dev-server -D
2.2.2 在配置文件叫做webpack.config.js前提下執行腳本
npx webpack-dev-server（或者在package.json中配置）
/* （或者在package.json中配置Key爲dev的內容）
......
"scripts": {
...,
"dev": "webpack-dev-server",
...
},
...... */
好處：不會真實的打包文件，默認以當前目錄下爲一個靜態目錄，訪問端口時顯示目錄結果。
問題：希望進入到build目錄下，如何操作呢？
答：添加devServer內容，寫法如下
module.exports = {
/* devServer: { // 開發服務器的配置
port: 3000,
progress: true, // 打包時添加進度條
contentBase: "./public" // 怎麼才能指向public目錄,而不是靜態文件目錄
}, */
devServer:{
port:8090,
contentBase:path.join(__dirname,"public")
},
...
2.2.3 訪問http://localhost:8080/和http://localhost:8090/是兩個不同的結果，當前重啓之後8080訪問是失敗的
-
（二、3）webpack手動配置——自動建立html打包至內存中
- 目的圖
![]()
（可放大）； - 安裝依賴 npm install html-webpack-plugin -D；
- 使用依賴
// webpack 是node寫出來的node寫法 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin') console.log(path.resolve(__dirname + "/public")); module.exports = { devServer: { // 開發服務器的配置 port: 3000, progress: true, // 打包時添加進度條 contentBase: "./public", // 怎麼才能指向public目錄,而不是靜態文件目錄 compress: true, // 啓動jgp壓縮 }, /* devServer:{ port:8090, contentBase:path.join(__dirname,"public") }, */ mode: 'development', // 模式 默認兩種 production development /* 入口 */ entry: __dirname + "/src/index.js", // 或寫成 entry: "./src/index.js", output: { /* 打包後的文件名 */ filename: "bundle.js", /* 路徑必須是一個絕對路徑,要引入path模塊 */ path: path.resolve(__dirname + "/public"), // path.resolve可以把相對路徑解析成絕對路徑, __dirname指的是當前目錄下產生一個public目錄,不加也行 // 或寫成 path: __dirname + "/public", }, /* （或者在package.json中配置Key爲dev的內容） ...... "scripts": { ..., "dev": "webpack-dev-server", ... }, ...... */ plugins: [ // 數組 放着所有的webpack插件 new HtmlWebpackPlugin({// 或寫成 new HtmlWebpackPlugin() template:'./src/index.html', filename:'dabao.html',// 模板有了,打包出來的文件命名爲dabao.html }), ] } - 如果在package.json中配置了key爲dev（"dev": "webpack-dev-server",）的內容，執行控制檯命令npm run dev
- 如果想要壓縮index.html利用minify（1、html有些有“en”雙引號去掉 2、避免緩存）
plugins: [ // 數組 放着所有的webpack插件 new HtmlWebpackPlugin({ // 或寫成 new HtmlWebpackPlugin() template: './src/demo.html', // 或寫成 "template": __dirname + "/src/demo.html" filename: 'index.html', // 模板有了,打包出來的文件命名爲dabao.html minify: { removeAttributeQuotes: true, // 刪除charset="utf-8"雙引號 collapseWhitespace: true, // 壓縮成一行 }, hash: true, }), ]<!-- [hash:8] --> output: { /* 打包後的文件名 */ filename: "bundle.[hash:8].js", // 避免緩存,每次修改產生新文件 /* 路徑必須是一個絕對路徑,要引入path模塊 */ path: path.resolve(__dirname + "/public"), // path.resolve可以把相對路徑解析成絕對路徑, __dirname指的是當前目錄下產生一個public目錄,不加也行 // 或寫成 path: __dirname + "/public", }, -
上述代碼百度網盤地址：
（可放大）；鏈接：https://pan.baidu.com/s/1dskJINhkqbU-huvut8mEOw
提取碼：nmww
複製這段內容後打開百度網盤手機App，操作更方便哦
-
◆ Webpack安裝配置（實戰2）
- 1 或者Webpack的全局安裝
npm install -g webpack
- 2 初始化一個基礎實例
前言：
在mian.js中引入了module.js，並且調用相應的方法，對於這樣的模塊，瀏覽器是無法直接使用的，僅僅是開發的過程中可以進行模塊的引入和調用方法，要變成瀏覽器識別的要通過Webpack，那如何操作呢？跟着下面的步驟：
- 3 隨便新建一個文件夾webpack，裏面再新建module.js和main.js
<!--module.js-->
module.exports = {
sayHello:function(){
console.log("hello world");
}
}
<!--main.js-->
var mymodule = require("./module.js")
mymodule.sayHello();
- 4 打包（創建Webpack的配置文件【webpack.config.js】）
<!--最基礎的webpack配置文件-->
module.exports = {
entry:__dirname+"/main.js", <!--入口文件[注意是兩個下劃線]，在項目中是/app/main.js-->
output:{ <!--打包輸出路徑-->
path:__dirname+"/public",
filename:"bundle.js" <!--生成文件名字-->
}
}
- 5 新建public打包目錄
-
◆ Webpack打包操作實戰
步驟：
- 1 ➫ 參考文章
- 2 全局安裝webpack-cli
npm install webpack-cli -g
- 2 ➫ 在當前目錄下面執行webpack指令（注意先安裝，如果是全局安裝則直接輸入下面命令）
webpack
- 3 ➫ 打包結果
