webpack 入門

  • 前提
  • 什么是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哦

筆者能力有限,如有錯誤,請多包涵!!!!

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容