前言

初衷： 本文我們講一下Webpack，說說它能干什么及為什么要使用它。把我整理的筆記分享給大家，如有錯誤請各位指出，不喜勿噴。

適合人群： 前端初級開發(fā)，大佬繞道。

本文講解是Webpack4.x，注意版本。

為什么要使用Webpack

在之前我們都是用傳統(tǒng)的方式去開發(fā)一個系統(tǒng)，html、css、js，就這些。開發(fā)完之后直接給后臺人員去部署，當(dāng)然這沒什么問題。當(dāng)我們的項(xiàng)目需求不斷增加，代碼也就越多，越不好維護(hù)，一個文件代碼都上百甚至上千行，里面代碼甚至都是重復(fù)的,還需要擔(dān)心script標(biāo)簽依賴順序問題，還需要擔(dān)心代碼變量污染問題，這時就出來了模塊化，防止變量污染及依賴順序問題，而現(xiàn)在主流打包工具就是Webpack，強(qiáng)大的社區(qū)支撐且支持Es Module、CommonJs、AMD規(guī)范。

什么是Webpack

Webpack是一個模塊打包工具，可以將Es Module、CommonJs的語法處理成瀏覽器可以運(yùn)行的代碼，把文件相關(guān)聯(lián)的依賴打包成一個js文件。

Webpack能干什么

利于我們便捷開發(fā)，幫助我們在本地搭建一個服務(wù)，代碼變動熱更新及不刷新頁面，全局注入依賴文件，代碼分割，代碼提取，去除不必要的代碼，區(qū)分環(huán)境變量，圖片優(yōu)化等，社區(qū)強(qiáng)大的插件擴(kuò)展，幫助我們項(xiàng)目便捷開發(fā)。

安裝

安裝Webpack環(huán)境也非常的簡單，一般情況下建議本地安裝，全局安裝可能會跟別的項(xiàng)目起沖突，盡量本地安裝。

cnpm i webpack@4 webpack-cli --save

上面安裝的webpack是語法，webpack-cli是命令行操作的執(zhí)行命令

安裝完之后，不能直接webpack -v這樣會報錯， 因?yàn)樗鼤ト终夷愕?code>webpack環(huán)境，但你現(xiàn)在是本地安裝，使用npx webpack -v這樣會在你項(xiàng)目進(jìn)行本地查找。

快速上手

初始化package.json文件

在你的項(xiàng)目文件下執(zhí)行該命令，進(jìn)行對應(yīng)填寫(一路回車也可以)，傻瓜式操作。

npm init

項(xiàng)目結(jié)構(gòu)

|- /node_modules
|- /src
   |- index.js
   |- news.js
   |- index.css
|- index.html
|- webpack.config.js
|- package.json

Entry

entry打包入口文件，打包入口有好幾種形式，下面我們來一一介紹它們。

單入口

module.exports = {
    entry: "./src/index.js"
}

多入口

多入口打包，js文件名稱則是對象的key值。

module.exports = {
    entry: {
        index: "./src/index.js",
        news: "./src/news.js"
    }
}

數(shù)組入口

數(shù)組打包，entry接收一個數(shù)組對象，里面參數(shù)只有最后一個值才是真正的打包路徑，其它參數(shù)都是將本路徑文件導(dǎo)入到最后一個參數(shù)里面

module.exports = {
    entry: ["./src/news.js", "./src/index.js"]
}

// 上面entry那種操作，等同于如下：
// index.js
require("news.js")

上面example中，除了最后一個參數(shù)，將其它數(shù)組參數(shù)都導(dǎo)入到最后一個參數(shù)文件內(nèi)

Output

output有入口文件就得有出口文件，

module.exports = {
    output: {
        path: __dirname + "/dist",
        filname: "app.js"
    }
}

filename有幾個名稱選項(xiàng)，我來看介紹一下

• [name] 使用入口文件名稱
• [chunkhash] 生成hash值，是通過當(dāng)前文件所依賴的進(jìn)行解析，最后生一個chunk，在生成hash值
• [contenthash] 當(dāng)文件內(nèi)容改變值，hash值才會改變
• [id] 使用chunk id生成文件名
• [hash] 使用hash作為文件名稱，每次生成的hash都不一樣

module.exports = {
    output: {
        path: __dirname + "/dist",
        filname: "[name][id][contenthash].js"
    }
}

Loader

loader是什么，以上我們只說了js相關(guān)的，Webpack默認(rèn)只認(rèn)識js文件，那么Webpack怎么打包js之外的東西呢，打包js之外的就會報錯，這怎么辦呢，這時候使用loader，loader是一個轉(zhuǎn)換器，我們下面以css文件為例子講解

• test 接收一個正則表達(dá)式，匹配文件后綴名稱，匹配成功進(jìn)入該loader執(zhí)行
• use 接收一個數(shù)組，當(dāng)只有一個loader可以寫成一個字符串

css-loader

安裝

npm i css-loader --save-dev

使用

module.exports = {
     module: {
        rules: [
            {
                test: /\.css$/,
                use: ["css-loader"] or "css-loader"
            }
        ]
    }
}

配置完該loader不會報錯了，但是代碼還是不生效。只是解析了css文件，并沒有將style掛載到頁面上，需要結(jié)合style-loader。

style-loader

安裝

npm i style-loader --save-dev

使用

module.exports = {
     module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    }
}

上面example中，loader必須有順序執(zhí)行，loader是從后往前執(zhí)行的，先解析css文件，然后將解析完的css文件掛載到頁面style標(biāo)簽上，這時在看代碼就會生效。

Plugins

clean-webpack-plugin

這時如果我們把output里面的filename修改之后，再次打包，可以看到之前的dist包里面的舊代碼還依然存在，這時我們想每次打包都生成一個新的dist目錄，這時就需要用到插件了。

安裝clean-webpack-plugin插件, 我本地安裝是3.0.0的版本

npm i clean-wenpack-plugin --save-dev

使用

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

html-webpack-plugin

我們打包完dist目錄下沒有，index.html文件，那么我們可以使用該插件，在每次打包時都會生成一個html文件，下面我們來安裝一下

安裝html-webpack-plugin我這里使用的是3.2.0版本，需要注意的是，你本地的node版本越高，安裝的插件越新，可能新版本會跟webpack4有點(diǎn)不兼容甚至導(dǎo)致代碼報錯。

npm i html-webpack-plugin@3.2.0 --save-dev

使用

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',  // 以咱們本地的index.html文件為基礎(chǔ)模板
            filename: "index.html",  // 輸出到dist目錄下的文件名稱
        }),
    ]
}

html-webpack-plugin插件接收一個對象，這個對象有一些屬性值，這里咱就不一一舉例了，可以看這篇文章《html-webpack-plugin用法全解》。

完整代碼

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname + "/dist",
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: "index.html",
        }),
    ]
}

總結(jié)

到這里我們的webpack入門就講完了，實(shí)現(xiàn)了一個簡單的打包，webpack默認(rèn)只認(rèn)識js文件，要想使用css及圖片，可以使用loader進(jìn)行轉(zhuǎn)換?？梢钥吹阶詈蟠虬?，dist目錄下還是一些原來的文件html、css、js，直接把dist包給后臺部署就行。

更多常用的loader之常用plugin下期分享，記得關(guān)注我喲???。

感謝

謝謝你讀完本篇文章，希望對你能有所幫助，如有問題歡迎各位指正。

我是蛙人(????)，如果覺得寫得可以的話，請點(diǎn)個贊吧?。

感興趣的小伙伴可以加入 [ 前端娛樂圈交流群 ] 歡迎大家一起來交流討論

寫作不易，「點(diǎn)贊」+「在看」+「轉(zhuǎn)發(fā)」 謝謝支持?

往期好文

《聊聊在Vue項(xiàng)目中使用Decorator裝飾器》

《聊聊什么是CommonJs和Es Module及它們的區(qū)別》

《帶你輕松理解數(shù)據(jù)結(jié)構(gòu)之Map》

《這些工作中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工作中常用的Git命令及特殊問題場景怎么解決》

《你真的了解ES6中的函數(shù)特性么？》