webpack入門寶典

時間 2019-11-13

標籤 webpack 入門寶典简体版

原文原文鏈接

前提摘要

本文是通過二天本身學習總結出來的一些心得，本文是在最新版的webpack4x的基礎上進行配置的（據說webpack4x比以往改變都很大有些插件可能有問題）。若是你之前沒怎麼接觸過Webpack，而你又你對webpack感興趣，那麼動手跟着本文中那個貫穿始終的例子寫一次，寫完之後你會發現你已明明白白的走進了Webpack的大門。javascript

// 一個常見的webpack配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //分離js和css插件
const CleanWebpackPlugin = require("clean-webpack-plugin"); //清除build文件中的殘餘文件
const MinifyPlugin = require("babel-minify-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map', //打包成source-map (這種打包方式只能在開發環境中使用)
    entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/build", //打包後的文件存放的地方
        filename: "bundle-[hash].js" //打包後輸出文件的文件名
    },
    //搭建本地服務配置
    devServer: {
        contentBase: './public', //本地服務器所加載的目錄
        historyApiFallback: true, //不跳轉
        inline: true //開啓實時
    },
    //配置編譯jsx js模塊的轉換模塊babel
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/, //匹配所處理文件的表達式（必須）
                use: {
                    loader: "babel-loader",
                    // options: { presets: ["env", "react"] }
                },
                exclude: /node_modules/ //屏蔽不須要處理的文件夾
            }, {
                test: /\.css$/, //正則匹配要處理的文件的後綴
                // use: [     {         loader: "style-loader"     }, {         loader:
                // "css-loader",         options: {             modules: true, //指定使用css module
                //           localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
                //    }     }, {         loader: "postcss-loader"     } ]
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: "css-loader",
                            options: {
                                url: false,
                                minimize: true,
                                sourceMap: true,
                                modules: true,//開啓css-module
                                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
                            }
                        }, {
                            loader: "postcss-loader"
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin("版權所用翻版必究！"),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html", //new 一個這個插件的實例，並傳入相關的參數
            minify: { //壓縮HTML文件
                removeComments: true, //移除HTML中的註釋
                collapseWhitespace: true //刪除空白符與換行符
            }
        }),
        new webpack.HotModuleReplacementPlugin(), //熱加載插件
        new UglifyJsPlugin({sourceMap: true}),
        new ExtractTextPlugin({ filename: './app.css', disable: false, allChunks: true }),
        new CleanWebpackPlugin('build/*.*', {
            root: __dirname,
            verbose: true,
            dry: false
        })
    ]
}

什麼是WebPack，爲何要使用它？

爲什要使用WebPack

現今的不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。爲了簡化開發的複雜度，前端社區涌現出了不少好的實踐方法css

模塊化，讓咱們能夠把複雜的程序細化爲小的文件;
相似於TypeScript這種在JavaScript基礎上拓展的開發語言：使咱們可以實現目前版本的JavaScript不能直接使用的特性，而且以後還能轉換爲JavaScript文件使瀏覽器能夠識別；
Scss，less等CSS預處理器
...

這些改進確實大大的提升了咱們的開發效率，可是利用它們開發的文件每每須要進行額外的處理才能讓瀏覽器識別,而手動處理又是很是繁瑣的，這就爲WebPack類的工具的出現提供了需求。html

什麼是Webpack

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

WebPack和Grunt以及Gulp相比有什麼特性

其實Webpack和另外兩個並無太多的可比性，Gulp/Grunt是一種可以優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優勢使得Webpack在不少場景下能夠替代Gulp/Grunt類的工具。java

Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。node

Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。

開始使用Webpack

初步瞭解了Webpack工做方式後，咱們一步步的開始學習使用Webpack。react

安裝

Webpack可使用npm安裝，新建一個空的練習文件夾（此處命名爲webpack sample project），在終端中轉到該文件夾後執行下述指令就能夠完成安裝。webpack

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

正式使用Webpack前的準備

在上述練習文件夾中建立一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。在終端中使用npm init命令能夠自動建立這個package.json文件

npm init

輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，做者等信息，不過不用擔憂，若是你不許備在npm中發佈你的模塊，這些問題的答案都不重要，回車默認便可。git

2.package.json文件已經就緒，咱們在本項目中安裝Webpack做爲依賴包es6

// 安裝Webpack
npm install --save-dev webpack

回到以前的空文件夾，並在裏面建立兩個文件夾,app文件夾和public文件夾，app文件夾用來存放原始數據和咱們將寫的JavaScript模塊，public文件夾用來存放以後供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。接下來咱們再建立三個文件:

index.html --放在public文件夾中;
Greeter.js-- 放在app文件夾中;
main.js-- 放在app文件夾中;

此時項目結構以下圖所示

咱們在index.html文件中寫入最基礎的html代碼，它在這裏目的在於引入打包後的js文件（這裏咱們先把以後打包後的js文件命名爲bundle.js，以後咱們還會詳細講述）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>

<body>
    <div id='root'> </div>
</body>

</html><script src="bundle.js"></script>

咱們在Greeter.js中定義一個返回包含問候信息的html元素的函數,並依據CommonJS規範導出這個函數爲一個模塊：

var config = require('./config.json');
module.exports = function () {
    var greet = document.createElement('div');
    greet.textContent = config.contentTxt;
    return greet
}

main.js文件中咱們寫入下述代碼，用以把Greeter模塊返回的節點插入頁面。

// const greeter = require('./Greeter.js');
// document.querySelector('#root').appendChild(greeter());

正式使用Webpack

指定入口文件後，webpack將自動識別項目所依賴的其它文件，不過須要注意的是若是你的webpack不是全局安裝的，那麼當你在終端中使用此命令時，須要額外指定其在node_modules中的地址(這種方法屢試不爽，下面有更好的方法)

經過配置文件來使用`Webpack`

Webpack擁有不少其它的比較高級的功能（好比說本文後面會介紹的loaders和plugins），這些功能其實均可以經過命令行模式實現，可是正如前面提到的，這樣不太方便且容易出錯的，更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，咱們能夠把全部的與打包相關的信息放在裏面。

繼續上面的例子來講明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名爲webpack.config.js的文件，咱們在其中寫入以下所示的簡單配置代碼，目前的配置主要涉及到的內容是入口文件路徑和打包後文件的存放路徑。

devtool: 'eval-source-map', //打包成source-map (這種打包方式只能在開發環境中使用)
    entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/build", //打包後的文件存放的地方
        filename: "bundle-[hash].js" //打包後輸出文件的文件名
    },

注：「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。

有了這個配置以後，再打包文件，只需在終端裏運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就能夠了，這條命令會自動引用webpack.config.js文件中的配置選項

更快捷的執行打包任務

在命令行中輸入命令須要代碼相似於node_modules/.bin/webpack這樣的路徑實際上是比較煩人的，不過值得慶幸的是npm能夠引導任務執行，對npm進行配置後能夠在命令行中使用簡單的npm start命令來替代上面略微繁瑣的命令。在package.json中對scripts對象進行相關設置便可，設置方法以下。

{
    "name": "wbs",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack",
    }
}

注：package.json中的script會安裝必定順序尋找命令對應位置，本地的node_modules/.bin路徑就在這個尋找清單中，因此不管是全局仍是局部安裝的Webpack，你都不須要寫前面那指明詳細的路徑了。

npm的 start命令是一個特殊的腳本名稱，其特殊性表如今，在命令行中使用 npm start就能夠執行其對於的命令，若是對應的此腳本名稱不是 start，想要在命令行中運行時，須要這樣用 npm run {script name}如 npm run build，咱們在命令行中輸入 npm start試試，輸出結果以下：

如今只須要使用 npm start就能夠打包文件了，有沒有以爲 webpack也不過如此嘛，不過不要過小瞧 webpack，要充分發揮其強大的功能咱們須要修改配置文件的其它選項，一項項來看。

因爲webpack版本是最新版本若是要用package.json中特殊的腳本名稱還得須要安裝 webpack-cli

Webpack的強大功能

生成Source Maps（使調試更容易）

開發老是離不開調試，方便的調試能極大的提升開發效率，不過有時候經過打包後的文件，你是不容易找到出錯了的地方，對應的你寫的代碼的位置的，Source Maps就是來幫咱們解決這個問題的。

經過簡單的配置，webpack就能夠在打包時爲咱們生成的source maps，這爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。

在webpack的配置文件中配置source maps，須要配置devtool，它有如下四種不一樣的配置選項，各具優缺點，描述以下：

devtool選項	配置結果
`source-map`	在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的`source map`，可是它會減慢打包速度；
`cheap-module-source-map`	在一個單獨的文件中生成一個不帶列映射的`map`，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；
`eval-source-map`	使用`eval`打包源文件模塊，在同一個文件中生成乾淨的完整的`source map`。這個選項能夠在不影響構建速度的前提下生成完整的`sourcemap`，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；
`cheap-module-eval-source-map`	這是在打包文件時最快的生成`source map`的方法，生成的`Source Map` 會和打包後的`JavaScript`文件同行顯示，沒有列映射，和`eval-source-map`選項具備類似的缺點；

正如上表所述，上述選項由上到下打包速度愈來愈快，不過同時也具備愈來愈多的負面做用，較快的打包速度的後果就是對打包後的文件的的執行有必定影響。

對小到中型的項目中，eval-source-map是一個很好的選項，再次強調你只應該開發階段使用它，咱們繼續對上文新建的webpack.config.js，進行以下配置:

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
}

cheap-module-eval-source-map方法構建速度更快，可是不利於調試，推薦在大型項目考慮時間成本時使用。

使用webpack構建本地服務器

想不想讓你的瀏覽器監聽你的代碼的修改，並自動刷新顯示修改後的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，能夠實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置以前須要單獨安裝它做爲項目依賴

npm install --save-dev webpack-dev-server

devserver做爲webpack配置選項中的一項，如下是它的一些配置選項，更多配置可參考這裏

devserver的配置選項	功能描述
contentBase	默認webpack-dev-server會爲根文件夾提供本地服務器，若是想爲另一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到「public"目錄）
port	設置默認監聽端口，若是省略，默認爲」8080「
inline	設置爲`true`，當源文件改變時會自動刷新頁面
historyApiFallback	在開發單頁應用時很是有用，它依賴於HTML5 history API，若是設置爲`true`，全部的跳轉將指向index.html

把這些命令加到webpack的配置文件中，如今的配置文件webpack.config.js以下所示

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: "./public", //本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 } }

在package.json中的scripts對象中添加以下命令，用以開啓本地服務器：

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack",
        "server": "webpack-dev-server --open"
    },

在終端中輸入npm run server便可在本地的8080端口查看結果

Loaders

鼎鼎大名的Loaders登場了！

Loaders是webpack提供的最激動人心的功能之一了。經過使用不一樣的loader，webpack有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理，好比說分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件，對React的開發而言，合適的Loaders能夠把React的中用到的JSX文件轉換爲JS文件。

Loaders須要單獨安裝而且須要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括如下幾方面：

test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
query：爲loaders提供額外的設置選項（可選）

不過在配置loader以前，咱們把Greeter.js裏的問候消息放在一個單獨的JSON文件裏,並經過合適的配置使Greeter.js能夠讀取該JSON文件的值，各文件修改後的代碼以下：

在app文件夾中建立帶有問候信息的JSON文件(命名爲config.json)

{
    "contentTxt": "hello"
}

更新後的Greeter.js

var config = require('./config.json');
module.exports = function () {
    var greet = document.createElement('div');
    greet.textContent = config.contentTxt;
    return greet
}

注因爲webpack3.*/webpack2.*已經內置可處理JSON文件，這裏咱們無需再添加webpack1.*須要的json-loader。在看如何具體使用loader以前咱們先看看Babel是什麼？

Babel

Babel實際上是一個編譯JavaScript的平臺，它能夠編譯代碼幫你達到如下目的：

讓你能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器徹底支持；
讓你能使用基於JavaScript進行了拓展的語言，好比React的JSX；

Babel的安裝與配置

Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你都須要安裝單獨的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

咱們先來一次性安裝這些依賴包

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中配置Babel的方法以下:

module.exports = {
    entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/public",//打包後的文件存放的地方
        filename: "bundle.js"//打包後輸出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true//實時刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

如今你的webpack的配置已經容許你使用ES6以及JSX的語法了。繼續用上面的例子進行測試，不過此次咱們會使用React，記得先安裝 React 和 React-DOM

npm install --save react react-dom

接下來咱們使用ES6的語法，更新Greeter.js並返回一個React組件

import React, {Component} from 'react' import config from './config.json';
class Greeter extends Component {
    render() {
        return (
            <div>
                {config.greetText}
            </div>
        );
    }
}
export default Greeter

修改main.js以下，使用ES6的模塊定義和渲染Greeter模塊

import React from 'react';
import { render } from 'react-dom';
import Greeter from './Greeter.js'

import './main.css'//導入css文件



render( < Greeter / > , document.getElementById('root'));

從新使用npm start打包，若是以前打開的本地服務器沒有關閉，你應該能夠在localhost:8080下看到與以前同樣的內容，這說明react和es6被正常打包了。

Babel的配置

Babel其實能夠徹底在 webpack.config.js 中進行配置，可是考慮到babel具備很是多的配置選項，在單一的webpack.config.js文件中進行配置每每使得這個文件顯得太複雜，所以一些開發者支持把babel的配置選項放在一個單獨的名爲 ".babelrc" 的配置文件中。咱們如今的babel的配置並不算複雜，不過以後咱們會再加一些東西，所以如今咱們就提取出相關部分，分兩個配置文件進行配置（webpack會自動調用.babelrc裏的babel配置選項），以下：

module.exports = {
    entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/public", //打包後的文件存放的地方
        filename: "bundle.js" //打包後輸出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public", //本地服務器所加載的頁面所在的目錄
        historyApiFallback: true, //不跳轉
        inline: true //實時刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }
};

//.babelrc
{
  "presets": ["react", "env"]
}

到目前爲止，咱們已經知道了，對於模塊，Webpack能提供很是強大的處理功能，那那些是模塊呢。

一切皆模塊

Webpack有一個不可不說的優勢，它把全部的文件都都當作模塊處理，JavaScript代碼，CSS和fonts以及圖片等等經過合適的loader均可以被處理。

CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

繼續上面的例子

//安裝
npm install --save-dev style-loader css-loader

module.exports = {
    ...module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
};

請注意這裏對同一個文件引入多個loader的方法。

接下來，在app文件夾裏建立一個名字爲"main.css"的文件，對一些元素設置樣式

html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    padding: 0;
}

咱們這裏例子中用到的webpack只有單一的入口，其它的模塊須要經過 import, require, url等與入口文件創建其關聯，爲了讓webpack能找到」main.css「文件，咱們把它導入」main.js 「中，以下

import React from 'react';
import { render } from 'react-dom';
import Greeter from './Greeter.js'

import './main.css'//導入css文件



render( < Greeter / > , document.getElementById('root'));

一般狀況下，css會和js打包到同一個文件中，並不會打包爲一個單獨的css文件，不過經過合適的配置webpack也能夠把css打包爲單獨的文件的。

上面的代碼說明webpack是怎麼把css當作模塊看待的，我們繼續看一個更加真實的css模塊實踐。

CSS module

在過去的一些年裏，JavaScript經過一些新的語言特性，更好的工具以及更好的實踐方法（好比說模塊化）發展得很是迅速。模塊使得開發者把複雜的代碼轉化爲小的，乾淨的，依賴聲明明確的單元，配合優化工具，依賴管理和加載管理能夠自動完成。

不過前端的另一部分，CSS發展就相對慢一些，大多的樣式表卻依舊巨大且充滿了全局類名，維護和修改都很是困難。

被稱爲CSS modules的技術意在把JS的模塊化思想帶入CSS中來，經過CSS模塊，全部的類名，動畫名默認都只做用於當前模塊。Webpack對CSS模塊化提供了很是好的支持，只須要在CSS loader中進行簡單配置便可，而後就能夠直接把CSS的類名傳遞到組件的代碼中，這樣作有效避免了全局污染。具體的代碼以下

module.exports = {
    ...module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定啓用css
                            modules localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                        }
                    }
                ]
            }
        ]
    }
};

咱們在app文件夾下建立一個Greeter.css文件來進行一下測試

.root {
    background-color: #eee;
    padding: 10px;
    border: 3px solid #ccc;
  }

導入.root到Greeter.js中

import React, {Component} from 'react';
import config from './config.json';
import style from './Greeter.css';
class Greeter extends Component {
    render() {
        return (
            <div id="abc" className={style.root}>
                123{config.contentTxt}
            </div>
        );
    }
}

export default Greeter

放心使用把，相同的類名也不會形成不一樣組件之間的污染。

CSS modules 也是一個很大的主題，有興趣的話能夠去其官方文檔瞭解更多。

CSS預處理器

Sass 和 Less 之類的預處理器是對原生CSS的拓展，它們容許你使用相似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS，CSS預處理器能夠這些特殊類型的語句轉化爲瀏覽器可識別的CSS語句，

你如今可能都已經熟悉了，在webpack裏使用相關loaders進行配置就可使用了，如下是經常使用的CSS 處理loaders:

Less Loader
Sass Loader
Stylus Loader

不過其實也存在一個CSS的處理平臺-PostCSS，它能夠幫助你的CSS實現更多的功能，在其官方文檔可瞭解更多相關知識。

舉例來講如何使用PostCSS，咱們使用PostCSS來爲CSS代碼自動添加適應不一樣瀏覽器的CSS前綴。

首先安裝postcss-loader 和 autoprefixer（自動添加前綴的插件）

npm install --save-dev postcss-loader autoprefixer

接下來，在webpack配置文件中添加postcss-loader，在根目錄新建postcss.config.js,並添加以下代碼以後，從新使用npm start打包時，你寫的css會自動根據Can i use裏的數據添加不一樣前綴了。

module.exports = {
    ...module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

至此，本文已經談論了處理JS的Babel和處理CSS的PostCSS的基本用法，它們其實也是兩個單獨的平臺，配合webpack能夠很好的發揮它們的做用。接下來介紹Webpack中另外一個很是重要的功能-Plugins

插件（Plugins）

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。

Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。

使用插件的方法

這就是webpack插件的基礎用法了，下面給你們推薦幾個經常使用的插件

HtmlWebpackPlugin

這個插件的做用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS文件的新index.html。這在每次生成的js文件名稱不一樣時很是有用（好比添加了hash值）。

安裝

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

這個插件自動完成了咱們以前手動作的一些事情，在正式使用以前須要對一直以來的項目結構作一些更改：

移除public文件夾，利用此插件，index.html文件會自動生成，此外CSS已經經過前面的操做打包到JS中了。
在app目錄下，建立一個index.tmpl.html文件模板，這個模板包含title等必須元素，在編譯過程當中，插件會依據此模板生成最終的html頁面，會自動添加所依賴的 css, js，favicon等文件，index.tmpl.html中的模板源代碼以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>

<body>
    <div id='root'> </div>
</body>

</html>

3.更新webpack的配置文件，方法同上,新建一個build文件夾用來存放最終的輸出文件

// 一個常見的webpack配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //分離js和css插件
const CleanWebpackPlugin = require("clean-webpack-plugin"); //清除build文件中的殘餘文件
const MinifyPlugin = require("babel-minify-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map', //打包成source-map (這種打包方式只能在開發環境中使用)
    entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/build", //打包後的文件存放的地方
        filename: "bundle-[hash].js" //打包後輸出文件的文件名
    },
    //搭建本地服務配置
    devServer: {
        contentBase: './public', //本地服務器所加載的目錄
        historyApiFallback: true, //不跳轉
        inline: true //開啓實時
    },
    //配置編譯jsx js模塊的轉換模塊babel
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //匹配所處理文件的表達式（必須）
            use: {
                loader: "babel-loader",
                // options: { presets: ["env", "react"] }
            },
            exclude: /node_modules/ //屏蔽不須要處理的文件夾
        }, {
            test: /\.css$/, //正則匹配要處理的文件的後綴
            // use: [     {         loader: "style-loader"     }, {         loader:
            // "css-loader",         options: {             modules: true, //指定使用css module
            //           localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
            //    }     }, {         loader: "postcss-loader"     } ]
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                    loader: "css-loader",
                    options: {
                        url: false,
                        minimize: true,
                        sourceMap: true,
                        modules: true, //開啓css-module
                        localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
                    }
                }, {
                    loader: "postcss-loader"
                }]
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin("版權所用翻版必究！"),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html", //new 一個這個插件的實例，並傳入相關的參數
            minify: { //壓縮HTML文件
                removeComments: true, //移除HTML中的註釋
                collapseWhitespace: true //刪除空白符與換行符
            }
        })
    ]
}

再次執行npm start你會發現，build文件夾下面生成了bundle.js和index.html。

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack裏頗有用的一個插件，它容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。

在webpack中實現HMR也很簡單，只須要作兩項配置

在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加「hot」參數；

不過配置完這些後，JS模塊其實仍是不能自動熱加載的，還須要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載，雖然這個API不難使用，可是若是是React模塊，使用咱們已經熟悉的Babel能夠更方便的實現功能熱加載。

整理下咱們的思路，具體實現方法以下

Babel和webpack是獨立的工具
兩者能夠一塊兒工做
兩者均可以經過插件拓展功能
HMR是一個webpack插件，它讓你能瀏覽器中實時觀察模塊修改後的效果，可是若是你想讓它工做，須要對模塊進行額外的配額；
Babel有一個叫作react-transform-hrm的插件，能夠在不對React模塊進行額外的配置的前提下讓HMR正常工做；

仍是繼續上例來實際看看如何配置

// 一個常見的webpack配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //分離js和css插件
const CleanWebpackPlugin = require("clean-webpack-plugin"); //清除build文件中的殘餘文件
const MinifyPlugin = require("babel-minify-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map', //打包成source-map (這種打包方式只能在開發環境中使用)
    entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/build", //打包後的文件存放的地方
        filename: "bundle-[hash].js" //打包後輸出文件的文件名
    },
    //搭建本地服務配置
    devServer: {
        contentBase: './public', //本地服務器所加載的目錄
        historyApiFallback: true, //不跳轉
        inline: true //開啓實時
    },
    //配置編譯jsx js模塊的轉換模塊babel
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //匹配所處理文件的表達式（必須）
            use: {
                loader: "babel-loader",
                // options: { presets: ["env", "react"] }
            },
            exclude: /node_modules/ //屏蔽不須要處理的文件夾
        }, {
            test: /\.css$/, //正則匹配要處理的文件的後綴
            // use: [     {         loader: "style-loader"     }, {         loader:
            // "css-loader",         options: {             modules: true, //指定使用css module
            //           localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
            //    }     }, {         loader: "postcss-loader"     } ]
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                    loader: "css-loader",
                    options: {
                        url: false,
                        minimize: true,
                        sourceMap: true,
                        modules: true, //開啓css-module
                        localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
                    }
                }, {
                    loader: "postcss-loader"
                }]
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin("版權所用翻版必究！"),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html", //new 一個這個插件的實例，並傳入相關的參數
            minify: { //壓縮HTML文件
                removeComments: true, //移除HTML中的註釋
                collapseWhitespace: true //刪除空白符與換行符
            }
        }),
        new webpack.HotModuleReplacementPlugin(), //熱加載插件
    ]
}

安裝react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel


{
    "presets": ["react", "env"],
    "env": {
        "development": {
            "plugins": [
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-hmr",
                        "imports": ["react"],
                        "locals": ["module"]
                    }]
                }]
            ]
        }
    }
}
// .babelrc

如今當你使用React時，能夠熱加載模塊了,每次保存就能在瀏覽器上看到更新內容。

優化插件

webpack提供了一些在發佈階段很是有用的優化插件，它們大多來自於webpack社區，能夠經過npm安裝，經過如下插件能夠完成產品發佈階段所需的功能

OccurenceOrderPlugin :爲組件分配ID，經過這個插件webpack能夠分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
UglifyJsPlugin：壓縮JS代碼；
ExtractTextPlugin：分離CSS和JS文件

咱們繼續用例子來看看如何添加它們，OccurenceOrder 和 UglifyJS plugins 都是內置插件，你須要作的只是安裝其它非內置插件

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

在配置文件的plugins後引用它們

// 一個常見的webpack配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //分離js和css插件
const CleanWebpackPlugin = require("clean-webpack-plugin"); //清除build文件中的殘餘文件
const MinifyPlugin = require("babel-minify-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    devtool: 'eval-source-map', //打包成source-map (這種打包方式只能在開發環境中使用)
    entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件
    output: {
        path: __dirname + "/build", //打包後的文件存放的地方
        filename: "bundle-[hash].js" //打包後輸出文件的文件名
    },
    //搭建本地服務配置
    devServer: {
        contentBase: './public', //本地服務器所加載的目錄
        historyApiFallback: true, //不跳轉
        inline: true //開啓實時
    },
    //配置編譯jsx js模塊的轉換模塊babel
    module: {
        rules: [{
            test: /(\.jsx|\.js)$/, //匹配所處理文件的表達式（必須）
            use: {
                loader: "babel-loader",
                // options: { presets: ["env", "react"] }
            },
            exclude: /node_modules/ //屏蔽不須要處理的文件夾
        }, {
            test: /\.css$/, //正則匹配要處理的文件的後綴
            // use: [     {         loader: "style-loader"     }, {         loader:
            // "css-loader",         options: {             modules: true, //指定使用css module
            //           localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
            //    }     }, {         loader: "postcss-loader"     } ]
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [{
                    loader: "css-loader",
                    options: {
                        url: false,
                        minimize: true,
                        sourceMap: true,
                        modules: true, //開啓css-module
                        localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css類名的格式
                    }
                }, {
                    loader: "postcss-loader"
                }]
            })
        }]
    },
    plugins: [
        new webpack.BannerPlugin("版權所用翻版必究！"),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html", //new 一個這個插件的實例，並傳入相關的參數
            minify: { //壓縮HTML文件
                removeComments: true, //移除HTML中的註釋
                collapseWhitespace: true //刪除空白符與換行符
            }
        }),
        new webpack.HotModuleReplacementPlugin(), //熱加載插件
        new UglifyJsPlugin({ sourceMap: true }),
        new ExtractTextPlugin({ filename: './app.css', disable: false, allChunks: true }),
        new CleanWebpackPlugin('build/*.*', {
            root: __dirname,
            verbose: true,
            dry: false
        })
    ]
}

此時執行npm run build能夠看見代碼是被壓縮後的

因爲是webpack4x 須要將extract-text-webpack-plugin 升級到 4.0.0-alpha.0 否則打包分離樣式式會不成功

1. Webpack經典入門
2. Flink入門寶典
3. Kafka入門寶典（詳細截圖版）
4. [ZYNQ入門寶典]愛之初體驗
5. 性能測試必備入門寶典
6. Flink入門寶典（詳細截圖版）
7. ES入門寶典（詳細截圖版）
8. 【 webpack 】- 2 webpack入門
9. 【Python入門】1.小白的Python入門寶典
10. webpack入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Swift 字典 - Swift 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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

webpack入門寶典

前提摘要

什麼是WebPack，爲何要使用它？

爲什要使用WebPack

什麼是Webpack

WebPack和Grunt以及Gulp相比有什麼特性

開始使用Webpack

安裝

正式使用Webpack前的準備

正式使用Webpack

經過配置文件來使用`Webpack`

更快捷的執行打包任務

Webpack的強大功能

生成Source Maps（使調試更容易）

`source-map`

在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的`source map`，可是它會減慢打包速度；

`cheap-module-source-map`

在一個單獨的文件中生成一個不帶列映射的`map`，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；

`eval-source-map`

`cheap-module-eval-source-map`

這是在打包文件時最快的生成`source map`的方法，生成的`Source Map` 會和打包後的`JavaScript`文件同行顯示，沒有列映射，和`eval-source-map`選項具備類似的缺點；

使用webpack構建本地服務器

Loaders

Babel

Babel的安裝與配置

Babel的配置

一切皆模塊

CSS

CSS module

CSS預處理器

插件（Plugins）

使用插件的方法

HtmlWebpackPlugin

Hot Module Replacement

優化插件

webpack入門寶典

前提摘要

什麼是WebPack，爲何要使用它？

爲什要使用WebPack

什麼是Webpack

WebPack和Grunt以及Gulp相比有什麼特性

開始使用Webpack

安裝

正式使用Webpack前的準備

正式使用Webpack

經過配置文件來使用Webpack

更快捷的執行打包任務

Webpack的強大功能

生成Source Maps（使調試更容易）

source-map

在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包速度；

cheap-module-source-map

在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；

eval-source-map

cheap-module-eval-source-map

這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

使用webpack構建本地服務器

Loaders

Babel

Babel的安裝與配置

Babel的配置

一切皆模塊

CSS

CSS module

CSS預處理器

插件（Plugins）

使用插件的方法

HtmlWebpackPlugin

Hot Module Replacement

優化插件

經過配置文件來使用`Webpack`

`source-map`

在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的`source map`，可是它會減慢打包速度；

`cheap-module-source-map`

在一個單獨的文件中生成一個不帶列映射的`map`，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；

`eval-source-map`

`cheap-module-eval-source-map`

這是在打包文件時最快的生成`source map`的方法，生成的`Source Map` 會和打包後的`JavaScript`文件同行顯示，沒有列映射，和`eval-source-map`選項具備類似的缺點；