webpack打包教程

一、webpack環境配置

1. 安裝node
  node官網地址: https://nodejs.org/zh-cn/
創建package.json文件
命令：npm init
安裝webpack
npm install --save-dev webpack
npm install --save-dev webpack-cli

全局安裝：
npm install --global webpack webpack-cli

打包
默認entry入口 src/index.js
默認output出口 dist/main.js

打包模式：
webpack --mode development
webpack --mode production

二、配置webpack.config.js

新建一個webpack.config.js
配置入口entry(所需打包的文件路徑)
配置出口output

（1）path指文件打包後的存放路徑
（2）path.resolve()方法將路徑或路徑片段的序列處理成絕對路徑
（3）__dirname 表示當前文件所在的目錄的絕對路徑
（4）filename是打包後文件的名稱

三、入口entry和出口output進階用法

入口entry

（1）單入口

單文件：
例如： entry：‘./src/index.js’

多文件：
在你想要多個依賴文件一起注入，並且將它們的依賴導向到一個“chunk”時，傳入數組的方式就很有用。

例如：entry：[‘./src/index.js’,‘./src/index2.js’,.......]

（2）多入口

例如：
entry:{
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}

出口output

（1）單出口

output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}

（2）多出口

output：{
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
}

四、配置webpack-dev-server

瞭解webpack-dev-server

webpack-dev-server是webpack官方提供的一個小型Express服務器。使用它可以爲webpack打包生成的資源文件提供web服務。

webpack-dev-server 主要提供兩個功能：
（1）爲靜態文件提供服務
（2）自動刷新和熱替換(HMR)

安裝webpack-dev-server

npm install --save-dev webpack-dev-server
配置webpack.config.js文件

devServer:{
contentBase:'./build, //設置服務器訪問的基本目錄
host:'localhost', //服務器的ip地址
port:8080, //端口
open:true //自動打開頁面
}

配置package.json

"scripts": {
"start": "webpack-dev-server --mode development"
}

五、1. 瞭解loader

    loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換爲 webpack 能夠處理的有效模塊，然後你就可以利用 webpack 的打包能力，對它們進行處理。

安裝loader

安裝style-loader和css-loader

下載：
npm install style-loader css-loader --save-dev

配置loader

（1）在webpack.config.js文件裏配置module中的rules

在 webpack 的配置中 loader 有兩個目標：

test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
use 屬性，表示進行轉換時，應該使用哪個 loader。

代碼：

九、使用PostCSS處理瀏覽器前綴

（1）處理效果

（2）安裝loader

安裝postcss-loader和autoprefixer

下載：
npm install --save-dev postcss-loader autoprefixer

（3）配置loader

需要和autoprefixer一起用

瀏覽器設置：

Loader中設置：
{
browsers: [
'ie >= 8',//ie版本大於等於ie8
'Firefox >= 20',//火狐瀏覽器大於20版本
'Safari >= 5',//safari大於5版本
'Android >= 4',//版本大於Android4
'Ios >= 6',//版本大於ios6
'last 4 version'//瀏覽器最新的四個版本
]
}

或者在package.json里加上下圖設置：

十、文件處理

圖片處理
（1）安裝loader
下載安裝file-loader
npm install --save-dev file-loader

（2）配置config文件

（3）選項配置

        配置options：

name：爲你的文件配置自定義文件名模板（默認值[hash].[ext]）
context：配置自定義文件的上下文，默認爲 webpack.config.js
publicPath：爲你的文件配置自定義 public 發佈目錄
outputPath：爲你的文件配置自定義 output 輸出目錄

                [ext]：資源擴展名
                [name]：資源的基本名稱
                [path]：資源相對於 context的路徑
                [hash]：內容的哈希值

字體文件處理
（1）下載字體文件
以bootstrap字體文件爲例子
Boostrap字體文件下載地址：https://v3.bootcss.com/getting-started/

（2）配置config文件

第三方 js庫處理
以jquery庫爲例子
（1）本地導入
編寫配置文件：

        webpack.ProvidePlugin參數是鍵值對形式，鍵就是我們項目中使用的變量名，值就是鍵所指向的庫。webpack.ProvidePlugin會先從npm安裝的包中查找是否有符合的庫。

如果webpack配置了resolve.alias選項（理解成“別名”），那麼webpack.ProvidePlugin就會順着設置的路徑一直找下去

    使用webpack.ProvidePlugin前需要引入webpack

（2）npm安裝模塊

        安裝jquery庫：
            npm install jquery --save-dev

        直接在js裏import引入
        Import $ from‘jquery’

十一、編譯es6

瞭解babel
目前，ES6（ES2015）這樣的語法已經得到很大規模的應用，它具有更加簡潔、功能更加強大的特點，實際項目中很可能會使用採用了ES6語法的模塊，但瀏覽器對於ES6語法的支持並不完善。爲了實現兼容，就需要使用轉換工具對ES6語法轉換爲ES5語法，babel就是最常用的一個工具

babel轉化語法所需依賴項：
babel-loader：負責 es6 語法轉化
babel-core： babel核心包
babel-preset-env：告訴babel使用哪種轉碼規則進行文件處理

安裝依賴

npm install babel-loader @babel/core @babel/preset-env --save-dev

配置config文件

exclude表示不在指定目錄查找相關文件

新建 .babelrc 文件配置轉換規則
1. 另一種規則配置
  .

十二、生成HTML(html-webpack-plugin)

瞭解html-webpack-plugin

HtmlWebpackPlugin會自動爲你生成一個HTML文件，根據指定的index.html模板生成對應的 html 文件。

根據src下的index.html自動在打包後的目錄下生成html文件，相關引用關係和文件路徑都會按照正確的配置被添加進生成的html裏

安裝依賴

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

配置config文件

十三、提取分離css

處理效果
將所有的入口 chunk(entry chunks)中引用的 css，移動到獨立分離的 CSS 文件
ExtractTextPlugin插件

（1）安裝（下載）

npm install --save-dev extract-text-webpack-plugin@next

（2）配置config文件

引入插件：

Rules設置：
fallback:編譯後用什麼loader來提取css文件

Plugins設置

mini-css-extract-plugin插件

（1）安裝（下載）

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

（2）配置config文件

引入插件

Rules設置：

Plugins設置

十四、壓縮css及優化css結構

處理效果

optimize-css-assets-webpack-plugin插件

（1）安裝（下載）

                npm install --save-dev optimize-css-assets-webpack-plugin

（2）配置config文件

引入插件：

Plugins設置

assetNameRegExp: 正則表達式，用於匹配需要優化或者壓縮的資源名。默認值是 /.css$/g
cssProcessor: 用於壓縮和優化CSS 的處理器，默認是 cssnano.
cssProcessorPluginOptions:傳遞給cssProcessor的插件選項，默認爲{}
canPrint:表示插件能夠在console中打印信息，默認值是true
discardComments:去除註釋