• 前提
• 什么是webpack
• webpack demo

前提

前一篇我們說了es6+babel是為了給webpack打下基礎，相信學習前端的同學們多多少少都有聽過webpack
在webpack是什么呢？

什么是webpack

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

很多很多的js，TypeScript  ==>  webpack打包編譯  ==>  瀏覽器看得懂的js

在webpack打包編譯的過程中，webpack幫你處理好什么事情呢？
最主要有下面幾個
1.css處理
2.es6處理
3.壓縮丑化你的代碼
4.熱加載,熱替代，讓你每次不需要刷新界面就可以看到效果
5.代碼切分（code spiltting）
等等。。。
是不是webpack強大的功能已經讓你躍躍欲試了，我們來入門實戰吧！！

webpack入門配置

entry

 entry: {
        index: path.resolve("./src/app.js")
    },

entry也就是配置你的入口文件

output

  output: {
        path: path.resolve("./dist/"),
        filename: "[name]/[name].js",
        // 添加 chunkFilename
        chunkFilename: "[name].[chunkhash:5].chunk.js"
    },

output配置你最后打包之后的文件放在哪個文件夾下面，這個文件叫做什么名字
有了入口和出口，那么中間的編譯，你需要什么東西，來編譯，這個也是根據你的需求來編譯的
比如js文件引入了css,less，寫法是es6你需要什么東西，讓webpack識別這些文件類型，并且幫你編譯
這就是webpack的重點loader

loader

rules:[
{
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        include: [path.resolve("./src")]
    },
    {
        test: /\.(css)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1,
                    module: true,
                    sourceMap: true,
                    localIdentName: "[local]_[hash:base64:5]"
                }
            },
            {
                loader: "postcss-loader",
                options: {
                    plugins: [
                        require("precss")(),
                        require("postcss-nested-import"),
                        require('postcss-functions')({
                            functions: {
                                px2rem: function ($px, $fontSize) {
                                    var $fontSize = $fontSize || 100
                                    return ($px / $fontSize / 2) + "rem"
                                }
                            }
                        })
                    ]
                }
            },
        ],
    },
    {
        test: /\.(less)$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
            },
            {loader: 'less-loader', options: {javascriptEnabled: true}},
        ],
    },
]

在webpack.rules中你可以配置你需要的loader來處理你打算處理的文件類型
比如js你需要用babel來處理，那么你就配置babel-loader來處理(babel是什么，可以看我們的上一篇)
css如何處理，你需要css能支持css modules,你可以在rules.loader.options.module=true配置
也就是

 {
                loader: "css-loader",
                options: {
                    importLoaders: 1,
                    module: true,
                    sourceMap: true,
                    localIdentName: "[local]_[hash:base64:5]"
                }
},

什么css太弱雞了，你需要更加強大的處理機制postcss
沒問題你只需要配置postcss-loade

 {
                loader: "postcss-loader",
                options: {
                    plugins: [
                        require("precss")(),
                        require("postcss-nested-import"),
                        require('postcss-functions')({
                            functions: {
                                px2rem: function ($px, $fontSize) {
                                    var $fontSize = $fontSize || 100
                                    return ($px / $fontSize / 2) + "rem"
                                }
                            }
                        })
                    ]
                }
            },

image.png

現在我又有需求了，我需要壓縮丑化我的代碼，沒問題這個時候你需要webpack的optimization屬性

壓縮丑化代碼

optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: true,
                    chunks: 'all',
                    minChunks: 5,
                }
            }
        },
    }

熱加載,熱替代，讓你每次不需要刷新界面就可以看到效果

這個就需要你自己寫一個server.js借助

webpack-dev-middleware
webpack-hot-middleware

就可以實現了，看看代碼

var express = require('express')
var app = express();
var http = require('http');


var webConfig = require('./webpack.dev')
var compiler = webpack(webConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: "/",
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {
    }
})

//重點就是下面這2行
app.use(devMiddleware)
app.use(hotMiddleware)


http.createServer(app).listen(constants.port);

在配置你的入口文件

//檢查到代碼更新，重新渲染將誒面
if (module.hot) {
    //重新渲染
    ReactDom.render(...)
    module.hot.accept();
}

image.png

代碼切分

最后來看看我們的代碼切分需要如何做到
你需要借助react-loadable組件
簡單配置就是

import Loading from "../component/Loading";
import Loadable from 'react-loadable';

const YouPage1= Loadable({
    loader: () => import('../page/YouPage1.js'),
    loading: Loading
});

你的路由配置如下

             <Switch>
                    <Route exact path="/YouPage1" component={YouPage1}/>
                     <Route exact path="/YouPage2" component={YouPage2}/>
            </Switch>

這樣在界面初始化加載YouPage1的時候，
不會把YouPage2的代碼加載進來，
之后再路由器匹配到需要的界面的時候，
才會加載需要的代碼，這就是所謂的code splitting

好了，說了這么多，是不是對webpack有一個整體的認識了呢
下面是github，可以拿去學習哦
webpack_demo
記得star哦

筆者能力有限，如有錯誤，請多包涵！！！！