webpack4.0實戰那些事兒

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

1 什麼是WebPack

打包機

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

構建

構建就是把源代碼轉換成發佈到線上的可執行 JavaScrip、CSS、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的文件。

2) install

npm install webpack webpack-cli -D
複製代碼

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

3) 配置文件webpack.config.js

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

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

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,分別對應開發環境和生產環境。

4 配置module

1 什麼是loader

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

loader的概念

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

• 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 參考文章

• webpack官方文檔
• webpack官方文檔中文版
• webpackGitHub