持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情
webpack4 模块打包工具
npx webpack index.js 打包命令pm
全局安装webapack
npm install webpack webpack-cli -g
webpack -v
npm uninstall webpack webpack-cli -g
局部安装
npm install webpack webpack-cli --save-dev //-D
webpack -v //command not found 默认在全局环境中查找
npx webpack -v //npx帮助我们在项目中的node_modules里查找webpack
安装指定版本
npm info webpack //查看webpack的历史发布信息
npm install webpack@x.xx webpack-cli -D
配置文件webpack.config.js
npx webpack --config webpackconfig.js //指定webpack使用webpackconfig.js文件作为配置文件来执行
"scripts": {
"bundle": "webpack"//这个地方不要添加npx, 因为npm run 执行的命令,会有限使用项目工程里的包,效果和npx类似
}
核心概念
entry:入口文件
output:出口文件(打包后的文件位置)
loader:(执行顺序:从右到左,从上到下)webpack默认只知道如何处理js模块,其他格式的模块处理,和处理方式就需要loader
file-loader 静态资源模块npm install file-loader -D
url-loader jpg的模块转换成base64格式的字符串
postcss-loader 添加前缀
plugin
HtmlWebpackPlugin 自动生成html文件
clean-webpack-plugin 打包之前先清空dist目录
sourceMap 源代码与打包后的代码的映射关系
devtool:"none" eval速度最快 cheap
开发环境推荐
devtool: "chrap-module-eval-source-map"
线上环境
devtool: "chrap-module-source-map"
WebpackDevServer
npm install webpack-dev-server -D
"scripts": {
"server": "webpack-dev-server"
}
devServer: {
contentBase: "./dist",
open: true,
hot: true,
//
hotOnly: true,
port: 8081,
proxy: {
"/api": {
target: "http://localhost: 9092"
}
}
}
axios.get("/api/info").then(res => {
console.log(res)
})
处理js模块HRM热更新
需要使用module.hot.accept来观察模块更新,从而更新
const webpack = require("webpack");
new webpack.HotModuleReplacementPlugin()
if(module.hot) {
module.hot.accept("./b", function() {
number();
})
}
Babel处理ES6
npm i babel-loader @babel/core @babel/preset-env -D
@babel/profill
把es的新特性都装进来,来弥补低版本浏览器中缺失的特性: 以全局的方式注入进来,windows,Promise,会造成全局对象的污染
打包体积大使用 useBuiltIns: "usage"//按需注入
@babel/plugin-transform-runtime
@bbabel/runtime
开发组件库,工具库,使用闭包的方式
配置React打包环境
npm install react react-dom --save
//安装babel与react转换的插件
npm install --save-dev @babel/preset-react
//在babelrc文件里添加
@babel/preset-react
tree Shaking只支持ES module的引入方式
optimization: {
usedExports: true
}
//package.json
"sideEffects": false 正常对所有模块进行 tree shaking或者
"sideEffects": ['*.css',@babel/profill]
development vs Production模块区分打包
npm install webpack-merge -D
//package.json
"scripts": {
"dev":"webpack-dev-server --config ./build/webpack.dev.js"
"build":"webpack --config ./build/webpack.prod.js"
}
//外部传入的全局变量
var merge = require("webpack-merge");
module.exports = (env) => {
if(env && env.production) {
return merge(commentConfig, prodConfig);
} else {
return merge(commonConfig, devConfig)
}
}
//外部传入变量
scripts: " --env.production"
代码分割
optimization: {
splitChunks: {
chunks: "all" //默认是支持异步async
}
}
