webpack 的學習01

時間 2019-11-12

標籤 webpack 學習简体版

原文原文鏈接

1.webpack 的介紹

1.1 什麼是webpack

webpack 是一個現代的 JavaScript 應用程序的模塊打包器（module bundler) ，分析你的項目結構，找到JavaScript模塊以及其餘的一些瀏覽器不能直接運行的拓展語言(Sass TypeScript等)，並將其打包轉換爲合適的格式供瀏覽器使用。css

1.2 爲何須要webpack

一個程序每每以來不少模塊，或者編譯scss less 等若是依賴人工管理不太可能，這個時候咱們就必須依賴webpack來解決。html

2. webpack 的安裝

注意：請先安裝 node 環境node

而後經過命令 npm install webpack@3.11.0 -g 來安裝webpackwebpack

這裏建議安裝一下 nrm (方便隨時切換鏡像源)

1. win + r 打開運行窗口，輸入cmd，打開命令窗口es6

2. 命令 npm install nrm -g 來安裝nrmweb

3. 經過 nrm ls 來查看鏡像源正則表達式

4. 經過 nrm use +鏡像名來切換鏡像源，如選擇淘寶 nrm use taobaonpm

效果圖以下：

3. 使用webpack

文件打包命令： webpack 輸入文件路徑（要打包的文件）打包好的文件路徑 這樣就把一個文件打包成另外一個文件json

示例以下：數組

新建一個JS文件爲test1.js內容爲:

function add (a, b) {
  return a + b
}
//用ES6語法 將add 函數暴露出去
module.exports = add;

　　又建一個js 文件爲test2.js 內容爲：

//引入test1.js
const add = require('./test1')
document.write(add(1,1))  //傳參（1,1）經過引入的函數打印值

　　新建一個HTML文件，名爲text.html，而且引入test2.js

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>測試</title>
 8   <script src="./test2.js"></script>
 9 </head>
10 <body>
11   
12 </body>
13 </html>

結果：正常狀況下，HTML頁面應該打印出值2，即test2.js的結果，可是因爲兩個JS文件都是用的ES6語法，瀏覽器沒法解析，這時就須要webpack來轉換打包

命令窗口：

此時，會額外生成一個JS文件。爲index.js文件，而後在test.html中引入index.js文件頁面中顯示打印的結果 2

4. webpack 中 loader 的配置和使用

4.1 webpack-config

注意： 上述案例中，每當咱們改變test2.js 文件中的實參數值時，咱們都須要經過重複執行命令 webpack ./test2.js ./index.js 。這樣工做將會十分繁瑣，爲此，咱們來配置一下 webpack-config

配製方法： 1. 新建文件 webpack-config.js

　　　　　　 2. 經過mudule.exports 暴露一個對象，在對象中配置入口文件和輸出文件，代碼以下

 1 //引入path 模塊
 2 const path = require('path')
 3 module.exports = {
 4   //配置入口文件 即要打包的文件
 5   entry: './src/test2.js',
 6   //配置輸出文件
 7   output: {
 8     //path 表示輸出文件的路徑  這使用node中 path.join 路徑拼接方法  dist表示在當前文件夾下再建立一個dist文件夾
 9     path: path.join(__dirname, 'dist'),
10     //filename: 表示輸出文件的名稱
11     filename: 'bundle.js'
12   }
13 }

　　　　　　 3. 運行命令： webpack。建立出一個新的文件夾，裏面包含有打包好的文件bundle.js. 而後將此JS 文件引入到test.html 中，代替其中的index.js 文件。

4.2 webpack-dev-server (實現：當改變test2.js文件中的值是，在咱們保存以後系統自動給打包而且自動打開瀏覽器)

默認爲 inline 模式（瀏覽器自動刷新）

配置步驟：

1. 運行 npm init -y 會生成一個package.json的文件

2. 運行 npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D -D意思是安裝到項目依賴，是-save-dev的簡寫 -S是-save的簡寫

 1 //引入path 模塊
 2 const path = require('path')
 3 module.exports = {
 4   //配置入口文件 即要打包的文件
 5   entry: './src/test2.js',
 6   //配置輸出文件
 7   output: {
 8     //path 表示輸出文件的路徑
 9     path: path.join(__dirname, 'dist'),
10     //靜態資源在服務器上運行時的訪問路徑，能夠直接http://localhost:8080/dist/bundle.js訪問到服務器中的bundle.js文件
11     publicPath: '/dist',
12     //filename: 表示輸出文件的名稱
13     filename: 'bundle.js'
14   }
15 }

3. test.html 中修改script 的src 路徑文件 <script src="./dist/bundle.js"></script> 爲 <script src="/dist/bundle.js"></script>，即去掉 '/dist' 前面的點，成爲絕對路徑

4. 運行： webpack- dev-server

頁面效果：說明編譯成功

5.運行： webpack-dev-server --inline --hot --open --port 8080

打印出結果

6. 配置script 使瀏覽器自動啓動打開，而且在數據更改後自動更新。打開package.json文件，找到script,把裏面的默認內容替換爲"dev" : "webpack-dev-server --inline --hot --open --port 8080" 以下：

{
  "name": "3-webpack-dev-server",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"   改成： "dev" : "webpack-dev-server --inline --hot --open --port 8080"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

7. 運行： npm run dev

瀏覽器自動啓動並且打印通過webpack打包好的文件的值

5. webpack-css

5.1 webpack-css 當咱們在項目中新建一個樣式文件如：a.css ,而且採用ES6的語法將樣式文件引入index.html文件中，require('樣式文件的路徑')，而不是用link引入

代碼以下：

1 //引入test3.js
2 const add = require('./test3')
3 document.write(add(2,8))  //傳參（1,1）經過引入的函數打印值
4 //使用ES6語法 引入a.css文件
5 require('../style/a.css')

頁面效果：可是當咱們再次運行 npm run dev 時，並不能成功打包，並且樣式也沒有應用成功，而且報錯，以下

5.2 安裝css處理包命令： npm install css-loader style-loader --save-dev

配置解析css文件的loader，在webpack.config.js文件中配置，使用module,一個對象，裏面是rules,一個數組，數組裏面一個是 test屬性，使用正則表達式來匹配當前的文件，一個是use數組，裏面是加載的解析包即css-loader和style-loader

1 module: {
2     rules: [
3       //配置用來解析css文件的loader(css-loader style-loader)
4       {test: /\.css$/,  //用正則匹配當前訪問的文件的後綴名是 .css
5        use: ['style-loader', 'css-loader']  // webpack底層調用這些包的順序是從右到左
6       }
7     ]
8   }

5.3 總體示例代碼以下：

html文件：index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>測試</title>
 8   <script src="/dist/bundle.js"></script>
 9 </head>
10 <body>
11   <div class="css">這裏的文字樣式並無使用link引入樣式文件，而是使用的ES6語法，在test4.js引入</div>
12 </body>
13 </html>

樣式文件：a.css

.css {
  color: #f00;
}

　配置文件：webpack.config.js

 1 //引入path 模塊
 2 const path = require('path')
 3 module.exports = {
 4   //配置入口文件 即要打包的文件
 5   entry: './src/test4.js',
 6   //配置輸出文件
 7   output: {
 8     //path 表示輸出文件的路徑
 9     path: path.join(__dirname, 'dist'),
10     //靜態資源在服務器上運行時的訪問路徑，能夠直接http://localhost:8080/dist/bundle.js訪問到服務器中的bundle.js文件
11     publicPath: '/dist',
12     //filename: 表示輸出文件的名稱
13     filename: 'bundle.js'
14   },
15   module: {
16     rules: [
17       //配置用來解析css文件的loader(css-loader style-loader)
18       {test: /\.css$/,  //用正則匹配當前訪問的文件的後綴名是 .css
19        use: ['style-loader', 'css-loader']  // webpack底層調用這些包的順序是從右到左  style-loader做用是在HTML中建立style標籤 css-loader是解析css文件
20       }
21     ]
22   }
23 }

引入的文件：test4.js

//引入test3.js
const add = require('./test3')
document.write(add(2,8))  //傳參（1,1）經過引入的函數打印值
//使用ES6語法 引入a.css文件
require('../style/a.css')

頁面效果：

6. webpack-less / webpack-sass

6.1在HTML頁面中加入使用 b.less和 c.scss文件的元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>測試</title>
 8   <script src="/dist/bundle.js"></script>
 9 </head>
10 <body>
11   <div class="css">這裏的文字樣式並無使用link引入樣式文件，而是使用的ES6語法，在test4.js引入</div>
12   <div class="less">這裏應用了less</div>
13   <div class="scss">這裏應用scss</div>
14 </body>
15 </html>

6.2 新建 b.less 和 c.scss 樣式文件，而且寫入樣式

6.3 在test4.js中，使用ES6 語法分別引入 b.less 和 c.scss

1 //引入test3.js
2 var add = require('./test3')
3 document.write(add(2,8))  //傳參（1,1）經過引入的函數打印值
4 
5 require('../style/a.css')  //使用ES6語法 引入a.css文件
6 require('../style/b.less')  //使用ES6語法 引入b.less文件
7 require('../style/c.scss')  //使用ES6語法 引入c.sass文件

6.4 按裝解析 less 和 scss 文件的loader

lessd的loader 命令：npm install less less-loader --save-dev 是依賴安裝

scss的loader 命令： npm install sass-loader node-sass --save-dev 一樣是依賴安裝

6.5 在webpack.config.js中配置解析 less 和 scss 的 loader，配置方式以下：

module: {

rules: [

//配置用來解析css文件的loader(css-loader style-loader)

{

test: /\.css$/, //用正則匹配當前訪問的文件的後綴名是 .css

use: ['style-loader', 'css-loader'] // webpack底層調用這些包的順序是從右到左

//配置用來解析less文件的loader(less less-loader)

{

test: /\.less$/,

use: ['style-loader', 'css-loader', 'less-loader']

//用來配置解析scss文件的loader（sass-loader node-sass）

{

test: /\.scss$/,

use: ['style-loader', 'css-loader', 'sass-loader']

}

]

}

6.6 頁面效果;

7. webpack-image/webpack-fonts

7.1爲引用了.css的元素添加背景圖片，代碼以下：

7.2 下載安裝圖片和文件的加載 loader

命令： npm install file-loader url-loader --save-dev 這其中url-loader中包含了file-loader

7.3 在 webpack.config.js 中的 module 對象中配置圖片和字體的 loader

{

test: /\.(png|jpg|gif)/,

use: [{

loader: 'url-loader', //url-loader中封裝了file-loader

options: { //limit表示若是圖片大於1000byte,就以路徑形式展現（用file-loader），小於的話就用base64格式展現（用url-loader）

limit: 1000

}

}]

}

7.4 運行： npm run dev 頁面效果：

7.5 應用字體圖標示例：

步驟：

7.5.1 打開網址 icomoon.io 字體圖標網站，點擊左上角IcoMoon App 按鈕，隨便選擇一個字體圖標，點擊右下角的Generate Font 按鈕，在點擊一樣位置的download按鈕，下載字體圖標。而後解壓下載的文件，把fonts文件夾複製到項目中的根目錄，style.css文件複製到項目的style文件夾中。

7.5.2 把字體樣式經過test4.js引入

7.5.3 因爲字體圖標和圖片使用的同樣的文件loader即file-loader和url-loader 因此這裏再也不下載，可是須要配置一下，方法是將字體文件的後綴名寫在配置圖片文件格式以後便可，以下

7.5.4 運行命令 npm run dev .頁面效果以下：

8. webpack-html 、 webpack-babel

webpack-html 的使用（插件--- html-webpack-plugin）

問題：當咱們修改webpack.config.js 文件中output 的filename時，就須要修改HTML中的引入的文件，這樣會比較繁瑣，這是就須要一個插件 html-webpack-plugin

應用該插件的步驟：

1. npm install html-webpack-plugin --save-dev

2. 在webpack.config.js文件中，使用ES6語法引入 HtmlWebpackPlugin插件 var HtmlWebpackPlugin = require('html-webpack-plugin')

3. 配置插件 注意：應用該插件時，須要將output的publicPath屬性刪除，不然會形成衝突

 1 //引入path 模塊
 2 const path = require('path')
 3 //引入html-webpack-plugin插件
 4 var HtmlWebpackPlugin = require('html-webpack-plugin')
 5 module.exports = {
 6   //配置入口文件 即要打包的文件
 7   entry: './src/test4.js',
 8   //配置輸出文件
 9   output: {
10     //path 表示輸出文件的路徑
11     path: path.join(__dirname, 'dist'),
12     //靜態資源在服務器上運行時的訪問路徑，能夠直接http://localhost:8080/dist/bundle.js訪問到服務器中的bundle.js文件
13     // publicPath: '/dist',
14     //filename: 表示輸出文件的名稱
15     filename: 'bundle.js'
16   },
17   module: {
18     rules: [
19       //配置用來解析css文件的loader(css-loader style-loader)
20       {
21         test: /\.css$/,  //用正則匹配當前訪問的文件的後綴名是 .css
22         use: ['style-loader', 'css-loader']  // webpack底層調用這些包的順序是從右到左
23       },
24       //配置用來解析less文件的loader(less less-loader)
25       {
26         test: /\.less$/,
27         use: ['style-loader', 'css-loader', 'less-loader']
28       },
29       //用來配置解析scss文件的loader（sass-loader node-sass）
30       {
31         test: /\.scss$/,
32         use: ['style-loader', 'css-loader', 'sass-loader']
33       },
34       //配置圖片和字體的loader （file-loader url-loader）
35       {
36         test: /\.(png|jpg|gif|eot|svg|ttf|woff)/,
37         use: [{
38           loader: 'url-loader',   //url-loader中封裝了file-loader
39           options: {  //limit表示若是圖片大於1000byte,就以路徑形式展現（用file-loader），小於的話就用base64格式  展現（用url-loader）
40             limit: 1000
41           }
42         }]
43       }
44     ]
45   },
46   plugins: [
47     new HtmlWebpackPlugin({   //這裏意思是根據一個template。HTML模板文件 生成一個新的HTML文件
48       filename: 'index.html',
49       template: 'template.html'
50     })
51   ]
52 }

4. 將原來HTML文件中的script 標籤刪除。即刪除：<script src="/dist/bundle.js"></script>

5. 運行 npm run dev

webpack-babel 的使用： loader---(babel-core babel-loader babel-preset-env) 它是專門處理ES6語法的

注意：webpack 1.x ----> babel-loader 6.x webpack 2.x ----> babel-loader 7.x (推薦) webpack 3.x ----> babel-loader 7.1

步驟：

1. 安裝包命令： npm install babel-core babel-loader babel-preset-env --save-dev

2. 修改test3.js 將其改成ES6語法同時修改test4.js也用ES6語法引入test3.js

3. 配置babel-loader

 1 {
 2         test: /\.js$/,
 3         //webpack2建議儘可能使用include 避免使用exclude。 exclude:/(node_modules)/  //node_modules下面的JS文件會被排除
 4         include: [path.resolve(__dirname, 'src')],
 5         use: {
 6           loader: 'babel-loader',
 7           //option裏面的東西能夠放到一個新建文件 .banelrc 的文件中
 8           option: {
 9             presets: ['env']  //babel-loader 的版本
10           }
11         }
12       }