- 前提
- 什么是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"
}
}
})
]
}
},
現在我又有需求了,我需要壓縮丑化我的代碼,沒問題這個時候你需要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();
}
代碼切分
最后來看看我們的代碼切分需要如何做到
你需要借助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哦
筆者能力有限,如有錯誤,請多包涵!!!!