webpack V3.X 入門指南(完)

Object 發(fā)布于2019-08-21 17:23 / 2887人閱讀

摘要：通俗的說，預(yù)處理器用一種專門的編程語言，進(jìn)行頁面樣式設(shè)計(jì)，然后再編譯成正常的文件，以供項(xiàng)目使用。在開發(fā)過程中，使用擴(kuò)展名為的文件來編寫樣式

webpack 前言

這篇文章是我在學(xué)習(xí)過程中對自己的一個(gè)記錄和總結(jié)，也希望可以幫助到和我當(dāng)初同樣對webpack有困惑的小伙伴

我在自學(xué)webpack時(shí)也參考了很多大神的文章，參考的帖子太多就不一一謝過了，再次感謝各位大神的幫助

文章中的每個(gè)例子，我都是親自測試過的，如果哪個(gè)地方出現(xiàn)筆誤等問題還請大家批評，我會及時(shí)改正

本文使用的webpack版本是V3.8.1

第一章 webpack能做什么 簡介

現(xiàn)如今前端主流的三種框架VueJs、ReactJs、AngularJs都推薦與webpack共同使用，所以不管你是哪種技術(shù)路線都不得不去學(xué)習(xí)了解webpack。那么webpack到底是何方神圣？

官方說法是webpack是一個(gè)模塊打包機(jī)，我個(gè)人理解是它可以把我們在開發(fā)環(huán)境下的代碼以及依賴文件等打包成在生產(chǎn)環(huán)境下可以直接使用的文件。也可以把一些瀏覽器不能直接運(yùn)行的文件進(jìn)行轉(zhuǎn)化，比如是css、less、scss等。同時(shí)webpack也可以對代碼進(jìn)行優(yōu)化，比如壓縮、合并、文件緩存等等。在項(xiàng)目中我們只需要把相應(yīng)的配置文件配置好，那么接下來的工作就都可以交給webpack這個(gè)全能大神去完成了。

官方網(wǎng)站

英文： http://webpack.js.org/

中文：https://doc.webpack-china.org/

Github：https://github.com/webpack/we...

第二章 webpack安裝 全局安裝

npm install –g webpack

查看版本號

webpack -v

注意：全局安裝并不推薦，因?yàn)槿职惭b以后版本就固定了，比如當(dāng)前你全局安裝了V3.8.1這個(gè)版本的webpack，如果你需要運(yùn)行一個(gè)比較早期版本的項(xiàng)目，比如webpack2的項(xiàng)目，就會有問題。另外，如果當(dāng)前項(xiàng)目你使用V3.8.1版本寫的，如果有一天webpack的版本升級了，比如升級到了V4.X，那么你之前的項(xiàng)目很有可能就跑不起來了。所以并不建議全局安裝，而是建議項(xiàng)目安裝。

項(xiàng)目安裝

進(jìn)入項(xiàng)目所在目錄：

npm init
npm install --save-dev webpack

注意：

npm init 命令的目的是生成 package.json文件

mac需要在命令前面加： sudo

如果npm命令安裝慢，可以使用cnpm（https://npm.taobao.org/）或者是yarn（https://yarnpkg.com/zh-Hans/

項(xiàng)目安裝的話，webpack -v命令是查看不了版本號的，因?yàn)轫?xiàng)目安裝時(shí)webpack是被安裝到node_modules里面的

第三章開發(fā)環(huán)境與生產(chǎn)環(huán)境

初學(xué)者會有一個(gè)疑問，為什么有的時(shí)候安裝依賴包的時(shí)候是--save-dev，而有的時(shí)候是--save，這兩個(gè)有什么區(qū)別呢？什么時(shí)候包含dev呢？
這就需要搞清楚一個(gè)概念：開發(fā)模式 和 生產(chǎn)模式。

開發(fā)模式 --save-dev

項(xiàng)目在開發(fā)編碼過程中還未上線使用就屬于開發(fā)模式，該模式下代碼不需要壓縮、合并等。比如編寫可以使用sass進(jìn)行css預(yù)處理，使用ES6的語法來編寫js代碼。在開發(fā)模式下依賴的包安裝的時(shí)候就需要使用--save-dev，dev表示開發(fā)的意思，使用--save-dev安裝的依賴包，會安裝在package.json的devDependencies中，這些依賴包只在開發(fā)時(shí)候會使用到，在上線生成環(huán)境下就不需要了。

生產(chǎn)模式 --save

項(xiàng)目已經(jīng)開發(fā)測試完成需要打包上線進(jìn)行運(yùn)營了，這時(shí)候就屬于生產(chǎn)模式，改模式下的文件需要是最終瀏覽器可以直接解析的文件，不能再用如.scss、.vue、.jsx等這樣的文件了。在生產(chǎn)模式下依賴的包安裝的時(shí)候就需要使用--save，使用--save安裝的依賴包，會安裝在package.json的dependencies中，這些依賴包是最終在上線時(shí)候使用到的，比如jquery.js、vue.js等。

大家在開發(fā)過程中安裝每個(gè)依賴包的時(shí)候，都一定先考慮這個(gè)包是只有開發(fā)模式下能用到，還是在生產(chǎn)模式下也需要用到，其實(shí)大家按照這個(gè)思路把下面的文章都看完，應(yīng)該就可以對--save-dev和--save有一個(gè)自己的理解了

第四章 Hello World

不管學(xué)習(xí)什么語言或工具，Hello World都是必不可少的。

目錄結(jié)構(gòu)


src：存放開發(fā)環(huán)境下的文件，也就是我們平時(shí)寫的代碼都在這里面

dist：存放生產(chǎn)環(huán)境下的文件，也就是打包后的文件，項(xiàng)目上線時(shí)把dist文件夾中的內(nèi)容拷貝到服務(wù)器上就可以使用了

node_modules：是自動生成的存放依賴包的文件夾，使用npm install命令安裝依賴包

在src目錄下，新建文件helloworld.js

alert("Hello World!");

webpack.config.js

在src同級目錄下，新建文件webpack.config.js

const path = require("path");
module.exports = {
    //入口文件的配置項(xiàng)
    entry: {
        hello: "./src/helloworld.js"
    },
    //出口文件的配置項(xiàng)
    output: {
        path: path.resolve(__dirname, "dist"),
        //[name]對應(yīng)的是entry里面的屬性名，當(dāng)然也可以指定打包后的文件名稱
        filename: "[name].js"
    },
    //模塊，loader都是在這里面配置
    module: {},
    //插件
    plugins: []
};

在webpack中，最重要的就是webpack.config.js文件，幾乎所有的配置項(xiàng)都需要在該文件中配置，該文件中最重要的四項(xiàng)分別是：entry（入口）、ouput（出口）、module（模塊）、plugins（插件）。

path.resolve(__dirname, "dist")是取到當(dāng)前項(xiàng)目的路徑下的dist文件夾，是nodejs的語法。

配置好webpack.config.js文件后，需要在package.json中配置scripts，之所以要配置build，是因?yàn)槲覀兊?b>webpack并不是全局安裝的，而是項(xiàng)目安裝的，項(xiàng)目安裝的話webpack命令就被安裝到了node_modules下面，所以需要配置才能找到該命令。

"scripts": {
    "build": "webpack --watch"
 }

執(zhí)行命令進(jìn)行打包:

npm run build

打包成功后，就會在dist文件夾下，自動生成hello.js文件。

--watch 可以實(shí)時(shí)監(jiān)控改變自動打包

watchOptions: {
    // 檢測時(shí)間間隔
    poll : 1000,
    // 防止重復(fù)導(dǎo)報(bào)，500毫秒以內(nèi)不在重復(fù)打包
    aggregeateTimeout: 500,
    // 忽略的文件夾
    ignored: /node_modules/
}

第五章 webpack-dev-server

在webpack里可以配置服務(wù)，這樣的好處是頁面不再使用本地協(xié)議打開，而是通過服務(wù)打開，這樣ajax等就可以正常使用了。同時(shí)，當(dāng)我們修改代碼并保存時(shí)，可以實(shí)時(shí)更新到頁面上，提高開發(fā)效率。

在webpack.config.js文件中，在與entry等同級配置下增加devServer配置

const path = require("path");
module.exports = {
    //入口文件的配置項(xiàng)
    entry: {
        hello: "./src/helloworld.js"
    },
    //出口文件的配置項(xiàng)
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    //模塊，loader都是在這里面配置
    module: {},
    //插件
    plugins: [],
    devServer: {
        //設(shè)置目錄結(jié)構(gòu)
        contentBase: path.resolve(__dirname, "dist"),
        //服務(wù)器的IP地址
        host: "127.0.0.1",
        //服務(wù)端壓縮是否開啟
        compress: true,
        //服務(wù)端口號
        port: 8081
    }
};

在package.json文件中進(jìn)行配置

"scripts": {
    "build": "webpack --watch",
    "server": "webpack-dev-server"
}

這樣的話就可以通過npm run server來開啟服務(wù)了，在地址欄里就可以根據(jù)devServer里的配置信息來訪問你的網(wǎng)站了，比如按照我的配置的話我需要在瀏覽器地址欄輸入：http://127.0.0.1:8081來訪問我的網(wǎng)站。

第六章 HTML文件打包

在項(xiàng)目中，我們需要把src目錄下的html文件進(jìn)行打包，打包到dist目錄下，這里我以單頁面為例。在src目錄下，創(chuàng)建index.html文件

需要安裝html-webpack-plugin插件

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

在webpack.config.js中引入安裝的插件

const HtmlWebpackPlugin = require("html-webpack-plugin");

const path = require("path");
module.exports = {
    //入口文件的配置項(xiàng)
    entry: {
        hello: "./src/helloworld.js"
    },
    //出口文件的配置項(xiàng)
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    //模塊，loader都是在這里面配置
    module: {},
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            minify: {
                //移除html中的引號
                removeAttributeQuotes: true,
                //去掉html文件中的回車和空格
                collapseWhitespace: true
            },
            hash: true,
            template: "./src/index.html"
        })
    ],
    devServer: {
        //設(shè)置目錄結(jié)構(gòu)
        contentBase: path.resolve(__dirname, "dist"),
        //服務(wù)器的IP地址
        host: "127.0.0.1",
        //服務(wù)端壓縮是否開啟
        compress: true,
        //服務(wù)端口號
        port: 8081
    }
};

注意：所有的plugins（插件）都需要安裝并在webpack.config.js文件中引入，然后才能使用。

第七章 CSS 文件打包 css打包

項(xiàng)目中，css文件需要進(jìn)行打包，在入口js文件中通過import引入css文件

import css from "./css/index.css"

css文件打包需要依賴兩個(gè)包

style-loader:用來處理css文件中的url()等，url掛在到j(luò)s中

css-loader:用來將css插入到頁面的style標(biāo)簽 安裝style-loader:npm

安裝兩個(gè)依賴包：

install --save-dev style-loader css-loader

在webpack.config.js文件中進(jìn)行配置

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

注意：這兩個(gè)包的引入是有先后順序的，一定要縣引入style-loader然后再引入css-loader，因?yàn)閮蓚€(gè)文件有依賴關(guān)系。

執(zhí)行命令進(jìn)行打包:

npm run build

注意： 這時(shí)css文件中的代碼會被打包到j(luò)s里面

css文件分離

項(xiàng)目中大多數(shù)時(shí)候我們需要把css文件多帶帶分離出來，而不是打包到j(luò)s文件中，這時(shí)就需要依賴插件extract-text-webpack-plugin，安裝插件

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

在webpack.config.js文件中引入插件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module: {
    rules: [
        {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader"]
            })
        }
    ]
}

在plugins中引入

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes: true,
            collapseWhitespace: true
        },
        hash: true,
        template: "./src/index.html"
    }),
    new ExtractTextPlugin("css/index.css")
]

css文件會分離出來，但如果css中引用的圖片不是base64格式而是獨(dú)立的圖片文件，這時(shí)候就會出現(xiàn)路徑問題導(dǎo)致找不到圖片地址，需要在output配置publicPath來解決，其中IP地址和端口號需要根據(jù)自己項(xiàng)目的實(shí)際情況來配置

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "http://127.0.0.1:8081/"
}

第八章 JS代碼壓縮

項(xiàng)目上線后，js文件通常都是需要進(jìn)行壓縮的，這樣可以減小文件體積加快加載速度，當(dāng)然webpack中已經(jīng)自帶了uglifyjs-webpack-plugin 插件來實(shí)現(xiàn)js代碼壓縮功能。

const UglifyJSPlugin = require("uglifyjs-webpack-plugin");

在webpack.config.js文件中的plugins中增加

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes: true,
            collapseWhitespace: true
        },
        hash: true,
        template: "./src/index.html"
    }),
    new ExtractTextPlugin("css/index.css"),
    new UglifyJSPlugin()
]

注意：使用npm run build命令可以打包成功，js文件也可以進(jìn)行壓縮，但是使用 npm run server開啟dev server是就會報(bào)錯(cuò)，原因是當(dāng)前還處于開發(fā)模式中，正常情況下開發(fā)模式是不需要進(jìn)行js文件壓縮的，所以會報(bào)錯(cuò)。等到真正上線在生產(chǎn)模式下也不可能會使用der server的。

第九章圖片打包

圖片打包分為兩節(jié)介紹，因?yàn)樵诰W(wǎng)頁開發(fā)中圖片引用的方式主要是兩種，一種是在css文件中作為背景圖片background-image: url(xx.jpg)，另一種是在html文件中使用標(biāo)簽引入

CSS中引用的圖片

需要依賴兩個(gè)loader，分別是file-loader 和 url-loader，當(dāng)然也一定是需要先安裝后使用了

npm install --save-dev file-loader url-loader

在module中增加對圖片的規(guī)則

{
    // 匹配圖片文件后 綴名稱。
    test: /.(png|jpg|gif)/,
    // 指定使用的loader和配置參數(shù)
    use: [{
        loader: "url-loader",
        options: {
            // 把小于5000B的文件打成Base64的格式寫入JS,大于這個(gè)大小的圖片文件會生成多帶帶的圖片文件，這個(gè)大小具體多少看實(shí)際項(xiàng)目要求，單位為B
            limit: 50000,
            // 圖片輸出到dist文件夾中的images文件夾中
            outputPath: "images/"
        }
    }]
}

注意：在loader中我們只配置了url-loader而沒有配置file-loader，原因是url-loader封裝了file-loader。當(dāng)文件大于limit中限制大小需要生成圖片文件時(shí)，url-loader會調(diào)用file-loader進(jìn)行處理，參數(shù)也會直接傳給file-loader

HTML中引用的圖片

需要依賴于html-withimg-loader

npm install html-withimg-loader --save-dev

在module中增加對html文件的規(guī)則

{
    test: /.(html|htm)$/i,
    use: ["html-withimg-loader"]
}

第十章 SASS打包

什么是SASS？CSS 預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。
通俗的說，“CSS 預(yù)處理器用一種專門的編程語言，進(jìn)行 Web 頁面樣式設(shè)計(jì)，然后再編譯成正常的 CSS 文件，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用
變量、簡單的邏輯程序、函數(shù)等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應(yīng)性更強(qiáng)、可讀性
更佳，更易于代碼的維護(hù)等諸多好處。
在開發(fā)過程中，使用擴(kuò)展名為.scss的文件來編寫css樣式,但該文件并不能直接被瀏覽器解析，所以就需要編譯為.css的文件，一般是使用sass 命令來進(jìn)行編譯，在webpack中使用loader來編譯該文件。
安裝loader

npm install --save-dev node-sass sass-loader

在js中引入編寫好的.scss文件

import sass from "./css/common.scss";

在module中增加對scss文件的規(guī)則

{
    test: /.scss$/,
    // use: ["style-loader", "css-loader", "sass-loader"]
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader", "sass-loader"]
    })
}

注意：CSS預(yù)處理不只有SASS，我這里只是以SASS為例來演示webpack對于css預(yù)處理的打包支持

第十一章 CSS3自動加前綴

我們經(jīng)常會為css3的屬性前綴而苦惱，-webkit-，-moz-，-ms-，-o-，一般都是通過http://www.caniuse.com來查詢，現(xiàn)在有了webpack自動加前綴的功能媽媽就再也不用擔(dān)心我的學(xué)習(xí)啦~~

npm install postcss-loader autoprefixer --save-dev

在項(xiàng)目的根目錄下創(chuàng)建文件postcss.config.js

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

在module中修改對于css文件的規(guī)則

{
    test: /.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [{
            loader: "css-loader",
            options: {
                importLoader: 1
            }
        }, "postcss-loader"]
    })
}

打包以后發(fā)現(xiàn)css3屬性的前綴就可以自動加上啦啦啦~~

第十二章 babel

現(xiàn)在越來越多的項(xiàng)目已經(jīng)采用ES6甚至ES7 ES8的新特性來編寫代碼了，但有些語法并不能直接被瀏覽器識別，這就需要轉(zhuǎn)化成瀏覽器可以直接識別的代碼，就需要用到babel

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在module中修改對于js jsx文件的規(guī)則

{
    test: /.(js|jsx)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["env", "react"]

        }
    }
}

打包成功會發(fā)現(xiàn)新語法已經(jīng)轉(zhuǎn)化為ES5的語法了

第十三章打包注釋

有的時(shí)候我們需要在文件中直接打包進(jìn)去一些注釋信息，webpack自帶的BannerPlugin插件就可以幫我們實(shí)現(xiàn)這個(gè)功能。在plugins中增加

new webpack.BannerPlugin("成哥所有，翻版必究!"),

第十四章打包第三方類庫

項(xiàng)目中我們經(jīng)常需要用到第三方類庫，比如jquery vuejs等，這就需要我們進(jìn)行相應(yīng)的配置。
安裝第三方類庫，這里以jquery vuejs為例

npm install jquery vue --save

在plugins中增加

new webpack.optimize.CommonsChunkPlugin({
    name: ["jquery", "vue"],
    filename: "assets/js/[name].js",
    minChunks: 2
})

總結(jié)

webpack的入門指南算是總結(jié)完了，其實(shí)webpack的強(qiáng)大之處還遠(yuǎn)不止于此，我只是在自己實(shí)踐中總結(jié)下來一些常用的功能，希望可以對入門webpack的小伙伴有所幫助。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89457.html

發(fā)表評論

登陸后可評論

0條評論

Object

男|高級講師

我要關(guān)注我要私信

TA的文章

[C/C++ C++11]正則表達(dá)式

閱讀 1719·2021-11-25 09:43
window.open 打開新窗口被攔截的解決方案

閱讀 2680·2019-08-30 15:53
canvas下的全屏問題

閱讀 1832·2019-08-30 15:52
div寬度和高度固定，讓圖片鋪滿整個(gè)div而且不變形

閱讀 2910·2019-08-29 13:56
JavaScript面向?qū)ο缶幊獭狥unction類型

閱讀 3332·2019-08-26 12:12
Node.js 全局對象

閱讀 575·2019-08-23 17:58
vue-element-admin簡化版

閱讀 2151·2019-08-23 16:59
每日 30 秒 ? 數(shù)組也會禿頂

閱讀 944·2019-08-23 16:21

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack V3.X 入門指南(完)

相關(guān)文章

**arcgis在webpack中的使用**

**arcgis在webpack中的使用**

webpack入門學(xué)習(xí)手記（五）

webpack入門及結(jié)合react進(jìn)行開發(fā)

Webpack 10分鐘入門

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

[C/C++ C++11]正則表達(dá)式

window.open 打開新窗口被攔截的解決方案

canvas下的全屏問題

div寬度和高度固定，讓圖片鋪滿整個(gè)div而且不變形

JavaScript面向?qū)ο缶幊獭狥unction類型

Node.js 全局對象

vue-element-admin簡化版

每日 30 秒 ? 數(shù)組也會禿頂

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

webpack V3.X 入門指南(完)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！