---
title: webpack-base-study
date: 2019-06-27 15:56:22
tags: huoxiaoye
---
## 寫在前面
使用Webpack有一段時間了，但是感覺之前學的用的都比較零散，
所以在這里整理一下Webpack的使用知識，從一開始的入門到進階。
你知道如何使用webpack打包項目嗎？
你知道如何在React中使用模塊化的css樣式嗎？
看文本文章后，嘿嘿嘿....
## 什么是webpack?
webpack 是前端的一個項目構建工具，它是基于 Node.js 開發(fā)出來的一個前端工具；
當我們在項目中導入了過多的外部文件是，或造成請求過程慢，錯綜復雜的依賴關系，以及全局變量污染等問題
那么，如何解決這些問題呢？請使用webpack
webpack 這個前端自動化構建工具，可以完美實現(xiàn)資源的合并、打包、壓縮、混淆等諸多功能。
## webpack安裝的兩種方式
1. 運行`npm i webpack -g`全局安裝webpack，這樣就能在全局使用webpack的命令
2. 在項目根目錄中運行`npm i webpack --save-dev` 將webpack安裝到項目依賴中
## 初步使用webpack打包構建列表隔行變色案例
1. 運行`npm init`初始化項目，使用npm管理項目中的依賴包
2. 創(chuàng)建項目基本的目錄結構
3. 使用`cnpm i jquery --save`安裝jquery類庫
4. 創(chuàng)建`main.js`并書寫各行變色的代碼邏輯：
```
// 導入jquery類庫
? ? import $ from 'jquery'
? ? // 設置偶數(shù)行背景色，索引從0開始，0是偶數(shù)
? ? $('#list li:even').css('backgroundColor','lightblue');
? ? // 設置奇數(shù)行背景色
? ? $('#list li:odd').css('backgroundColor',function(){
return "#f60"
});
```
5. 直接在頁面上引用`main.js`會報錯，因為瀏覽器不認識`import`這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換為低級的瀏覽器能識別的語法；
6. ** webpack最基本的使用：**運行`webpack 入口文件路徑 輸出文件路徑`對`main.js`進行處理：
```
webpack src/js/main.js dist/bundle.js
```
我們每打包一次就要輸入一長串的的指令，那么有沒有什么辦法可以簡單實現(xiàn)打包呢，請往下看
## 使用webpack的配置文件簡化打包時候的命令
1. 在項目根目錄中創(chuàng)建`webpack.config.js`
2. 由于運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在`webpack.config.js`中配置這兩個路徑：
```
? ? // 導入處理路徑的模塊
? ? var path = require('path');
? ? // 導出一個配置對象，將來webpack在啟動的時候，會默認來查找webpack.config.js，并讀取這個文件中導出的配置對象，來進行打包處理
? ? module.exports = {
? ? ? ? entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
? ? ? ? output: { // 配置輸出選項
? ? ? ? ? ? path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
? ? ? ? ? ? filename: 'bundle.js' // 配置輸出的文件名
? ? ? ? }
? ? }
```
3. 這樣，我們在打包的時候，輸入當我們在控制臺直接輸入 webpack 命令執(zhí)行的時候，webpack會執(zhí)行以下步驟
? * 首先，webpack 發(fā)現(xiàn)，我們并沒有通過命令的形式，給它指定入口和出口
? * webpack 就會去 項目的 根目錄中，查找一個叫做 `webpack.config.js` 的配置文件
? * 當找到配置文件后，webpack 會去解析執(zhí)行這個 配置文件，當解析執(zhí)行完配置文件后，就得到了 配置文件中，導出的配置對象
? * 當 webpack 拿到 配置對象后，就拿到了 配置對象中，指定的 入口? 和 出口，然后進行打包構建；
我們想要解放自己的雙手，可不可以我們在 `ctrl + s`的時候，自動打包呢?
## 實現(xiàn)webpack的實時打包構建
1. 使用`webpack-dev-server`來實現(xiàn)代碼實時打包編譯，當修改代碼之后，會自動進行打包構建。
2. 運行`cnpm i webpack-dev-server --save-dev`安裝到開發(fā)依賴
3. 安裝完成之后，在命令行直接運行`webpack-dev-server`來進行打包，發(fā)現(xiàn)報錯，此時需要借助于`package.json`文件中的指令，
來進行運行`webpack-dev-server`命令，在`scripts`節(jié)點下新增`"dev": "webpack-dev-server"`指令，
發(fā)現(xiàn)可以進行實時打包，但是dist目錄下并沒有生成`bundle.js`文件，這是為什么呢？因為`webpack-dev-server`將打包好的文件放在了內(nèi)存中
+ 把`bundle.js`放在內(nèi)存中的好處是：由于需要實時打包編譯，所以放在內(nèi)存中速度會非?？?/p>
+ 這個時候我們訪問webpack-dev-server啟動的`http://localhost:8080/`網(wǎng)站，發(fā)現(xiàn)是一個文件夾的面板，需要點擊到src目錄下，才能打開我們的index首頁，
? 此時引用不到bundle.js文件，需要修改index.html中script的src屬性為:`<script src="../bundle.js"></script>`
+ 為了能在訪問`http://localhost:8080/`的時候直接訪問到index首頁，可以使用`--contentBase src`指令來修改dev指令，指定啟動的根目錄：
```
"dev": "webpack-dev-server --contentBase src"
```
同時修改index頁面中script的src屬性為`<script src="bundle.js"></script>`
4. 注意：由于最新的webpack和webpack-dev-server打包報錯，這里我使用的是webpack@3.12.0和webpack-dev-server@2.9.3
## 使用`html-webpack-plugin`插件配置啟動頁面
由于使用`--contentBase`指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標簽的src屬性，所以推薦大家使用`html-webpack-plugin`插件配置啟動頁面.
html-webpack-plugin的兩個作用
* 自動在內(nèi)存中根據(jù)指定頁面生成一個內(nèi)存的頁面
* 自動，把打包好的(output輸出的) bundle.js 追加到頁面中去
使用步驟
1. 運行`cnpm i html-webpack-plugin --save-dev`安裝到開發(fā)依賴
2. 修改`webpack.config.js`配置文件如下：
```
? ? // 導入處理路徑的模塊
? ? var path = require('path');
? ? // 導入自動生成HTMl文件的插件
? ? var htmlWebpackPlugin = require('html-webpack-plugin');
? ? module.exports = {
? ? ? ? entry: path.resolve(__dirname, 'src/js/main.js'), // 項目入口文件
? ? ? ? output: { // 配置輸出選項
? ? ? ? ? ? path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
? ? ? ? ? ? filename: 'bundle.js' // 配置輸出的文件名
? ? ? ? },
? ? ? ? plugins:[ // 添加plugins節(jié)點配置插件
? ? ? ? ? ? new htmlWebpackPlugin({
? ? ? ? ? ? ? ? template:path.resolve(__dirname, 'src/index.html'),//模板路徑
? ? ? ? ? ? ? ? filename:'index.html'//自動生成的HTML文件的名稱
? ? ? ? ? ? })
? ? ? ? ]
? ? }
```
3. 修改`package.json`中`script`節(jié)點中的dev指令如下：
```
"dev": "webpack-dev-server"
```
4. 將index.html中script標簽注釋掉，因為`html-webpack-plugin`插件會自動把bundle.js注入到index.html頁面中！
## 實現(xiàn)自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號
**注意：熱更新在JS中表現(xiàn)的不明顯，在CSS身上表現(xiàn)明顯！**
### 方式1：
+ 修改`package.json`的script節(jié)點如下，其中`--open`表示自動打開瀏覽器，`--port 4321`表示打開的端口號為4321，`--hot`表示啟用瀏覽器熱更新：
```
"dev": "webpack-dev-server --hot --port 4321 --open"
```
### 方式2：
1. 修改`webpack.config.js`文件，新增`devServer`節(jié)點如下：
```
devServer: { // 這是配置 dev-server 命令參數(shù)的第二種方法，相對來說，這種方法麻煩一些
? ? open: true, // 自動打開瀏覽器
? ? port: 3000, // 設置啟動時候的運行端口
? ? contentBase: 'src', // 指定托管的根目錄
? ? hot: true
? },
```
2. 在頭部引入`webpack`模塊：
```
var webpack = require('webpack');
```
3. 在`plugins`節(jié)點下新增：
```
new webpack.HotModuleReplacementPlugin()
```
## 使用webpaack處理css文件和高級js語法
webpack 處理第三方文件類型的過程:
1. 發(fā)現(xiàn)這個 要處理的文件不是JS文件，然后就去 配置文件中，查找有沒有對應的第三方 loader 規(guī)則
2. 如果能找到對應的規(guī)則， 就會調(diào)用 對應的 loader 處理 這種文件類型；
3. 在調(diào)用loader 的時候，是從后往前調(diào)用的；
4. 當最后的一個 loader 調(diào)用完畢，會把 處理的結果，直接交給 webpack 進行 打包合并，最終輸出到? bundle.js 中去
### 使用webpack打包css文件
1. 運行`cnpm i style-loader css-loader --save-dev`
2. 修改`webpack.config.js`這個配置文件：
```
module: { // 用來配置第三方loader模塊的
? ? ? ? rules: [ // 文件的匹配規(guī)則
? ? ? ? ? ? { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規(guī)則
? ? ? ? ]
? ? }
```
3. 注意：`use`表示使用哪些模塊來處理`test`所匹配到的文件；`use`中相關loader模塊的調(diào)用順序是從后向前調(diào)用的；
### 使用webpack打包less文件
1. 運行`cnpm i less-loader less -D`
2. 修改`webpack.config.js`這個配置文件：
```
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
```
### 使用webpack打包sass文件
1. 運行`cnpm i sass-loader node-sass --save-dev`
2. 在`webpack.config.js`中添加處理sass文件的loader模塊：
```
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
```
### 使用webpack處理css中的路徑
1. 運行`cnpm i url-loader file-loader --save-dev`
2. 在`webpack.config.js`中添加處理url路徑的loader模塊：
```
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
```
3. 可以通過`limit`指定進行base64編碼的圖片大??；只有小于指定字節(jié)（byte）的圖片才會進行base64編碼：
```
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
```
### 使用babel處理高級JS語法
1. 運行`cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev`安裝babel的相關loader包
2. 運行`cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev`安裝babel轉換的語法
3. 在`webpack.config.js`中添加相關loader模塊，其中需要注意的是，一定要把`node_modules`文件夾添加到排除項：
```
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
```
4. 在項目根目錄中添加`.babelrc`文件，并修改這個配置文件如下：
```
{
? ? "presets":["es2015", "stage-0"],
? ? "plugins":["transform-runtime"]
}
```
5. 注意：語法插件`babel-preset-es2015`可以更新為`babel-preset-env`，它包含了所有的ES相關的語法；
## 在React中使用模塊化的css
寫在最后，學過vue的同學都知道，我們可以在 <style scoped="scoped"></style> 來設置局部的css樣式
那么，在react中如何實現(xiàn)局部的css樣式呢？
1. 在webpack.config.js中為css-loader啟用模塊化： css-loader?modules&localIdentName=[name]_[local]-[hash:8]
2. 在js 文件中引入樣式
```
import indexStyle from 'Index.css'`
// 此時 indexStyle 是一個對象，
// indexStyle = {
// title : '亂碼1',
box : '亂碼2'......
// }
export default function index(props) {
render(){
return (
<div className={indexStyle.box}>
? <h1 className={indexStyle.title}>XXXXXX</h1>
? <h3 className={indexStyle.body}>XXXXXX</h3>
</div>
)
}
}
```
注意
```css
/* 注意：當啟用 CSS 模塊化之后，這里所有的類名，都是私有的，
如果想要把類名設置成全局的一個類，可以把這個類名，用 :global() 給包裹起來 */
/* 當使用 :global() 設置了全局的 類樣式之后，這個類不會被重命名 */
/* 只有私有的類才會被重命名 */
:global(.title){
? color:red;
? text-align: center;
}
```
