摘要：通俗的說，預處理器用一種專門的編程語言，進行頁面樣式設計，然后再編譯成正常的文件，以供項目使用。在開發過程中，使用擴展名為的文件來編寫樣式

這篇文章是我在學習過程中對自己的一個記錄和總結，也希望可以幫助到和我當初同樣對webpack有困惑的小伙伴

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

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

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

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

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

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

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

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

npm install –g webpack

查看版本號

webpack -v

注意：全局安裝并不推薦，因為全局安裝以后版本就固定了，比如當前你全局安裝了V3.8.1這個版本的webpack，如果你需要運行一個比較早期版本的項目，比如webpack2的項目，就會有問題。另外，如果當前項目你使用V3.8.1版本寫的，如果有一天webpack的版本升級了，比如升級到了V4.X，那么你之前的項目很有可能就跑不起來了。所以并不建議全局安裝，而是建議項目安裝。

進入項目所在目錄：

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/

項目安裝的話，webpack -v命令是查看不了版本號的，因為項目安裝時webpack是被安裝到node_modules里面的

初學者會有一個疑問，為什么有的時候安裝依賴包的時候是--save-dev，而有的時候是--save，這兩個有什么區別呢？什么時候包含dev呢？
這就需要搞清楚一個概念：開發模式 和 生產模式。

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

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

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

不管學習什么語言或工具，Hello World都是必不可少的。

src：存放開發環境下的文件，也就是我們平時寫的代碼都在這里面

dist：存放生產環境下的文件，也就是打包后的文件，項目上線時把dist文件夾中的內容拷貝到服務器上就可以使用了

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

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

alert("Hello World!");

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

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

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

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

配置好webpack.config.js文件后，需要在package.json中配置scripts，之所以要配置build，是因為我們的webpack并不是全局安裝的，而是項目安裝的，項目安裝的話webpack命令就被安裝到了node_modules下面，所以需要配置才能找到該命令。

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

執行命令進行打包:

npm run build

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

--watch 可以實時監控改變自動打包

watchOptions: {
    // 檢測時間間隔
    poll : 1000,
    // 防止重復導報，500毫秒以內不在重復打包
    aggregeateTimeout: 500,
    // 忽略的文件夾
    ignored: /node_modules/
}

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

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

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

在package.json文件中進行配置

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

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

在項目中，我們需要把src目錄下的html文件進行打包，打包到dist目錄下，這里我以單頁面為例。在src目錄下，創建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 = {
    //入口文件的配置項
    entry: {
        hello: "./src/helloworld.js"
    },
    //出口文件的配置項
    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: {
        //設置目錄結構
        contentBase: path.resolve(__dirname, "dist"),
        //服務器的IP地址
        host: "127.0.0.1",
        //服務端壓縮是否開啟
        compress: true,
        //服務端口號
        port: 8081
    }
};

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

項目中，css文件需要進行打包，在入口js文件中通過import引入css文件

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

css文件打包需要依賴兩個包

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

css-loader:用來將css插入到頁面的style標簽 安裝style-loader:npm

安裝兩個依賴包：

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

在webpack.config.js文件中進行配置

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

注意：這兩個包的引入是有先后順序的，一定要縣引入style-loader然后再引入css-loader，因為兩個文件有依賴關系。

執行命令進行打包:

npm run build

注意： 這時css文件中的代碼會被打包到js里面

項目中大多數時候我們需要把css文件多帶帶分離出來，而不是打包到js文件中，這時就需要依賴插件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格式而是獨立的圖片文件， 這時候就會出現路徑問題導致找不到圖片地址，需要在output配置publicPath來解決，其中IP地址和端口號需要根據自己項目的實際情況來配置

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

項目上線后，js文件通常都是需要進行壓縮的，這樣可以減小文件體積加快加載速度，當然webpack中已經自帶了uglifyjs-webpack-plugin 插件來實現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文件也可以進行壓縮，但是使用 npm run server開啟dev server是就會報錯，原因是當前還處于開發模式中，正常情況下開發模式是不需要進行js文件壓縮的，所以會報錯。等到真正上線在生產模式下也不可能會使用der server的。

圖片打包分為兩節介紹，因為在網頁開發中圖片引用的方式主要是兩種，一種是在css文件中作為背景圖片background-image: url(xx.jpg)，另一種是在html文件中使用標簽引入

需要依賴兩個loader，分別是file-loader 和 url-loader，當然也一定是需要先安裝后使用了

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

在module中增加對圖片的規則

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

注意：在loader中我們只配置了url-loader而沒有配置file-loader，原因是url-loader封裝了file-loader。當文件大于limit中限制大小需要生成圖片文件時，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader

需要依賴于html-withimg-loader

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

在module中增加對html文件的規則

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

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

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

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

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

在module中增加對scss文件的規則

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

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

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

npm install postcss-loader autoprefixer --save-dev 

在項目的根目錄下創建文件postcss.config.js

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

在module中修改對于css文件的規則

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

打包以后發現css3屬性的前綴就可以自動加上啦啦啦~~

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

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

在module中修改對于js jsx文件的規則

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

        }
    }
}

打包成功會發現新語法已經轉化為ES5的語法了

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

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

項目中我們經常需要用到第三方類庫，比如jquery vuejs等，這就需要我們進行相應的配置。
安裝第三方類庫，這里以jquery vuejs為例

npm install jquery vue --save 

在plugins中增加

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

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