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哦
笔者能力有限，如有错误，请多包涵！！！！
