webpack4.0實戰那些事兒

時間 2019-11-10

標籤 webpack4.0 webpack 實戰那些事兒简体版

原文原文鏈接

webpack4.0剛剛發佈，官網自稱4.0最大的特色就是零配置。本文就詳細介紹一下webpack4.0實戰那些事兒。javascript

1 什麼是WebPack

打包機

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。css

構建

構建就是把源代碼轉換成發佈到線上的可執行 JavaScrip、CSS、HTML 代碼，包括以下內容。html

代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等。
代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載。
模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要構建功能把模塊分類合併成一個文件。
自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器。
代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。
自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

構建實際上是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。構建給前端開發注入了更大的活力，解放了咱們的生產力。前端

2 快速配置

1 核心概念

Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
Module：模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出全部依賴的模塊。
Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。
Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或作你想要的事情。
Output：輸出結果，在 Webpack 通過一系列處理並得出最終想要的代碼後輸出結果。

2 webpack的工做流程

1 Webpack 啓動後會從Entry裏配置的Module開始遞歸解析 Entry 依賴的全部 Module。
2 每找到一個 Module，就會根據配置的Loader去找出對應的轉換規則，對 Module 進行轉換後，再解析出當前 Module 依賴的 Module。
3 這些模塊會以 Entry 爲單位進行分組，一個 Entry 和其全部依賴的 Module 被分到一個組也就是一個 Chunk。
4 最後 Webpack 會把全部 Chunk 轉換成文件輸出。在整個流程中 Webpack 會在恰當的時機執行 Plugin 裏定義的邏輯。

3 配置webpack

1) 初始化npm

npm init -y

在要進行打包的目錄下初始化npm, 在控制檯執行以上命令後會生成一個package.json的文件。java

2) install

npm install webpack webpack-cli -D

由於從4.0開始，webpack拆分開兩個包分別是webpack和webpack-clinode

3) 配置文件`webpack.config.js`

module.exports = {
    entry：配置入口文件的地址
    output：配置出口文件的地址
    module：配置模塊,主要用來配置不一樣文件的加載器
    plugins：配置插件
    devServer：配置開發服務器
}

接下來咱們就一一介紹一下它們的配置。react

3 配置開發服務器

1 install

npm install webpack-dev-server -D

2 配置參數

devServer:{
    contentBase:path.resolve(__dirname,'dist'),// 配置開發服務運行時的文件根目錄
    host:'localhost',// 開發服務器監聽的主機地址
    compress:true,   // 開發服務器是否啓動gzip等壓縮
    port:8080        // 開發服務器監聽的端口
}

3 配置啓動參數

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

note

從4.0開始，運行webpack時必定要加參數 --mode development 或者--mode production,分別對應開發環境和生產環境。jquery

4 配置`module`

1 什麼是`loader`

module主要用來配置不一樣文件的加載器。談到加載就離不開loader,那什麼是loader呢？webpack

loader的概念

經過使用不一樣的Loader，Webpack能夠要把不一樣的文件都轉成JS文件,好比CSS、ES6/七、JSX等。git

test：匹配處理文件的擴展名的正則表達式
use：loader名稱，就是你要使用模塊的名稱
include/exclude:手動指定必須處理的文件夾或屏蔽不須要處理的文件夾
query：爲loaders提供額外的設置選項

loader的三種寫法

use
loader
use+loader

2 支持加載css文件

install

npm install style-loader css-loader -D

配置加載器

module: {
    rules:[
       {
            test:/\.css$/,
            use:['style-loader','css-loader'],
            include:path.join(__dirname,'./src'),
            exclude:/node_modules/
       }        
    ]
}

note

注意：加載器的加載順序爲從右至左。即先用css-loader解析而後用style-loader將解析後的css文件添加到Head標籤中。

3 支持圖片

install

npm install file-loader url-loader html-withimg-loader -D

file-loader 解決CSS等文件中的引入圖片路徑問題
url-loader 當圖片較小的時候會把圖片BASE64編碼，大於limit參數的時候仍是使用file-loader 進行拷貝

配置加載器

{
    test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
    loader: {
        loader: 'url-loader',
        options: {
            limit: 5 * 1024,// 圖片大小 > limit 使用file-loader, 反之使用url-loader
            outputPath: 'images/'// 指定打包後的圖片位置
        }
    }
}

usage - 手動添加圖片

let logo = require('./images/logo.png');
let img = new Image();
img.src = logo;
document.body.appendChild(img);

usage - 在CSS中引入圖片

.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

usage - 在HTML中使用圖片

{
    test:/\.(html|html)$/,
    use:'html-withimg-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
}

4 編譯less 和 sass

1) install

npm install less less-loader node-sass sass-loader -D

2) 配置加載器

把編譯好的代碼放到head裏面

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

把編譯好的代碼放到單獨的文件裏面

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new ExtractTextWebpackPlugin('css.css');
let lessExtract = new ExtractTextWebpackPlugin('less.css');
let sassExtract = new ExtractTextWebpackPlugin('sass.css');
...
{
    test: /\.css$/,
    loader: cssExtract.extract({
        use: ['css-loader?minimize']
    })
}, {
    test: /\.less$/,
    loader: lessExtract.extract({
        use: ['css-loader?minimize', 'less-loader']
    })
}, {
    test: /\.scss$/,
    loader: sassExtract.extract({
        use: ['css-loader?minimize', 'sass-loader']
    })
}

5 處理CSS3屬性前綴

爲了瀏覽器的兼容性，有時候咱們必須加入-webkit,-ms,-o,-moz這些前綴

Trident內核：主要表明爲IE瀏覽器, 前綴爲-ms
Gecko內核：主要表明爲Firefox, 前綴爲-moz
Presto內核：主要表明爲Opera, 前綴爲-o
Webkit內核：產要表明爲Chrome和Safari, 前綴爲-webkit

install

npm install postcss-loader autoprefixer -D

usage

postcss-loader 須要配置 postcss.config.js文件,postcss.config.js 內容以下：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

// 把 post-laoder push 到css的loader數組中
 {
    test: /\.css$/,
    loader: ['style-loader', 'css-loader', 'postcss-loader']
}, {
    test: /\.less$/,
    loader: ['style-loader', 'css-loader', 'less-loader']
}, {
    test: /\.scss$/,
    loader: ['style-loader', 'css-loader', 'sass-loader']
}

6 轉義ES6/ES7/JSX

Babel實際上是一個編譯JavaScript的平臺,能夠把ES6/ES7,React的JSX轉義爲ES5。

install

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D

配置加載器

{
    test:/\.jsx?$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react
        }
    },
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
}

5 配置`plugins`

配置插件

1 自動產出html

咱們但願自動能產出HTML文件，並在裏面引入產出後的資源。

install

npm install html-webpack-plugin -D

usage

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',   // 指定產出的模板
        filename: 'base.html',          // 產出的文件名
        chunks: ['common', 'base'],     // 在產出的HTML文件裏引入哪些代碼塊
        hash: true,                     // 名稱是否哈希值
        title: 'base',                  // 能夠給模板設置變量名，在html模板中調用 htmlWebpackPlugin.options.title 能夠使用
        minify: {                       // 對html文件進行壓縮
            removeAttributeQuotes: true // 移除雙引號
        }
    })
]

2 分離CSS

由於CSS的下載和JS能夠並行,當一個HTML文件很大的時候，咱們能夠把CSS單獨提取出來加載

install

npm install extract-text-webpack-plugin@next -D

usage

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
let cssExtract = new ExtractTextWebpackPlugin('css.css');
let lessExtract = new ExtractTextWebpackPlugin('less.css');
let sassExtract = new ExtractTextWebpackPlugin('sass.css');

...

module: {
    rules: [
         {
            test: /\.css$/,
            loader: cssExtract.extract({
                use: ['css-loader?minimize']
            })
        }, {
            test: /\.less$/,
            loader: lessExtract.extract({
                use: ['css-loader?minimize', 'less-loader']
            })
        }, {
            test: /\.scss$/,
            loader: sassExtract.extract({
                use: ['css-loader?minimize', 'sass-loader']
            })
        }
    ]
}

...

plugins: [
    cssExtract,
    lessExtract,
    sassExtract
]

處理圖片路徑問題

const PUBLIC_PATH='/';

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

3 拷貝靜態文件

有時項目中沒有引用的文件也須要打包到目標目錄

install

npm install copy-webpack-plugin -D

usage

const CopyWebpackPlugin = require('copy-webpack-plugin');
    plugins: [
        new CopyWebpackPlugin([{
            from: path.join(__dirname, 'public'),       // 從哪裏複製
            to: path.join(__dirname, 'dist', 'public')  // 複製到哪裏
    }])
]

4 打包前先清空輸出目錄

install

npm install  clean-webpack-plugin -D

usage

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')])
]

5 壓縮JS

install

npm install uglifyjs-webpack-plugin -D

usage

onst UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
plugins: [
    new UglifyjsWebpackPlugin()
]

6 如何調試打包後的代碼

webapck經過配置能夠自動給咱們source maps文件，map文件是一種對應編譯文件和源文件的方法

usage

devtool:'eval-source-map'

devtool的參數詳解

source-map 把映射文件生成到單獨的文件，最完整最慢
cheap-module-source-map 在一個單獨的文件中產生一個不帶列映射的Map
eval-source-map 使用eval打包源文件模塊,在同一個文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包後的JS同行顯示，沒有映射列

7 打包第三方類庫

1 直接引入

import _ from 'lodash';
alert(_.join(['a','b','c'],'@'));

2 插件引入

new webpack.ProvidePlugin({
    _:'lodash'
})

8 watch

當代碼發生修改後能夠自動從新編譯

watch: true,
    watchOptions: {
        ignored: /node_modules/, //忽略不用監聽變動的目錄
        aggregateTimeout: 500,  // 文件發生改變後多長時間後再從新編譯（Add a delay before rebuilding once the first file changed ）
        poll:1000               //每秒詢問的文件變動的次數
    }

9 服務器代理

若是你有單獨的後端開發服務器 API，而且但願在同域名下發送 API 請求，那麼代理某些 URL 會頗有用。

//請求到 /api/users 如今會被代理到請求 http://localhost:9000/api/users。
proxy: {
    "/api": "http://localhost:9000",
}

10 resolve解析

1 extensions

指定extension以後能夠不用在require或是import的時候加文件擴展名,會依次嘗試添加擴展名進行匹配

resolve: {
    //自動補全後綴，注意第一個必須是空字符串,後綴必定以點開頭
   extensions: ["",".js",".css",".json"],
},

2 alias

配置別名能夠加快webpack查找模塊的速度

每當引入jquery模塊的時候，它會直接引入jqueryPath,而不須要從node_modules文件夾中按模塊的查找規則查找
不須要webpack去解析jquery.js文件

const bootstrap = path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css');

resolve: {
    alias: {
        'bootstrap': bootstrap
    }
}

11 暴露全局對象

install

npm install expose-loader -D

action

把模塊的導出暴露給全局變量，

usage-1

require("expose-loader?libraryName!./file.js");

usage-2

rules: [{
    test: require.resolve('jquery'),// 注意 這裏是require的resolve 方法
    use: {
        loader: "expose-loader",
        options: "$"
    }
}]

13 多入口

有時候咱們的頁面能夠不止一個HTML頁面，會有多個頁面，因此就須要多入口

usage

// 多個入口，能夠給每一個入口添加html模板
entry: {
    index: './src/index.js',
    main:'./src/main.js'
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
    publicPath:PUBLIC_PATH
},

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: './src/index.html',
        chunks:['index'],
        filename:'index.html'
    }),
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        chunks:['login'],
        template: './src/login.html',
        filename:'login.html'
    })]
]

14 externals

若是咱們想引用一個庫，可是又不想讓webpack打包，而且又不影響咱們在程序中以CMD、AMD或者window/global全局等方式進行使用，那就能夠經過配置externals。

webpack.config.js

externals: {
    jquery: "jQuery"
    //若是要在瀏覽器中運行，那麼不用添加什麼前綴，默認設置就是global
},

index.js

const $ = require("jquery");
const $ = window.jQuery;

15 參考文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

webpack4.0實戰那些事兒

1 什麼是WebPack

2 快速配置

1 核心概念

2 webpack的工做流程

3 配置webpack

1) 初始化npm

2) install

3) 配置文件webpack.config.js

3 配置開發服務器

1 install

2 配置參數

3 配置啓動參數

4 配置module

1 什麼是loader

2 支持加載css文件

3 支持圖片

4 編譯less 和 sass

1) install

2) 配置加載器

5 處理CSS3屬性前綴

6 轉義ES6/ES7/JSX

5 配置plugins

1 自動產出html

2 分離CSS

3 拷貝靜態文件

4 打包前先清空輸出目錄

5 壓縮JS

6 如何調試打包後的代碼

7 打包第三方類庫

1 直接引入

2 插件引入

8 watch

9 服務器代理

10 resolve解析

1 extensions

2 alias

11 暴露全局對象

13 多入口

14 externals

15 參考文章

3) 配置文件`webpack.config.js`

4 配置`module`

1 什麼是`loader`

5 配置`plugins`