从0搭建自己的webpack开发环境
1.什么是Webpack？
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
image
使用Webpack作为前端构建工具：
- 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
- 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
- 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
- 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
- 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
在webpack应用中有两个核心:
- 模块转换器，用于把模块原内容按照需求转换成新内容，可以加载非 JS 模块
- 扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
// webpack 默认支持 模块的写法 commonjs 规范 node
// webpack-cli 解析用户传递的参数 // es6 规范 esmodule // 把这个模块打包 解析出浏览器可以识别的代码
- 扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
// webpack webpack-cli 0配置的方式来打包 // --save-dev
// npx npm 5.2之后出来的 npx webpack // 两个模式 开发模式 生产环境 // --mode 传入
// npm run scripts 里面可以配置对应的命令
// webpack配置文件默认叫 webpack.config.js webpack.file.js
// 通过--config 指定执行的文件是哪一个 // 1) 就是默认引用base 传入模式 // 2) 分别引入 dev,prod,在特定地方引入base
// webpack-merge 主要用来合并配置文件的
// 如果是开发环境 要使用webpack-dev-server // webpack-dev-server 是在内存中打包的 不会产生实体文件
// 自动生成html文件并且引入打包后的js内容
// loader 的执行顺序 默认是从下往上执行 从右边向左边
// 先解析css // css-loader 会解析css语法 style-loader 会将解析的css 变成style标签插入到页面中 // 解析css 需要两个loader css-loader style-loader
// 预处理器 .scss node-sass sass-loader // .less less less-loader // .stylus stylus stylus-loader
// 图片 + icon
// js es6-es5 有些api 不是es6语法 装饰器 类的属性
babel 转化功能 vue-cli 基于babel6来实现的 babel7
默认会调用 @babel/core会转化代码，转化的时候需要用 @babel/presets-env 转化成es5 @babel/core @babel/preset-env babel-loader
// react + vue
2.初始化项目
├── src # 源码目录
│ ├── a-module.js
│ └── index.js
编写 a-module.js
module.exports = 'hello';
编写 index.js
let a = require('./a-module');
console.log(a);
这里我们使用
CommonJS模块的方式引入，这种方式默认在浏览器上是无法运行的，我们希望通过webpack来进行打包！
3.webpack快速上手
3.1 安装
npm init -y
npm install webpack webpack-cli --save-dev
webpack默认支持0配置,配置scripts脚本
"scripts": {
"build": "webpack"
}
执行npm run build,默认会调用 node_modules/.bin下的webpack命令，内部会调用webpack-cli解析用户参数进行打包。默认会以 src/index.js 作为入口文件。
这里也可以使用
npx webpack,npx是 5.2版本之后npm提供的命令可以执行.bin下的可执行文件
image
我们可以发现已经产生了dist目录，此目录为最终打包出的结果。main.js可以在html中直接引用,这里还提示我们默认mode 为production
3.2 webpack.config.js
我们打包时一般不会采用0配置，webpack在打包时默认会查找当前目录下的 webpack.config.js or webpackfile.js 文件。
通过配置文件进行打包
const path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
filename:'bundle.js', // 打包出的结果文件
path:path.resolve(__dirname,'dist') // 打包到dist目录下
}
}
3.3 配置打包的mode
我们需要在打包时提供mode属性来区分是开发环境还是生产环境,来实现配置文件的拆分
├── build
│ ├── webpack.base.js
│ ├── webpack.dev.js
│ └── webpack.prod.js
我们可以通过指定不同的文件来进行打包
配置scripts脚本
"scripts": {
"build": "webpack --config ./build/webpack.prod",
"dev": "webpack --config ./build/webpack.dev"
}
可以通过 config 参数指定,使用哪个配置文件来进行打包
通过env参数区分
"scripts": {
"build": "webpack --env.production --config ./build/webpack.base",
"dev": "webpack --env.development --config ./build/webpack.base"
}
改造webpack.base文件默认导出函数，会将环境变量传入到函数的参数中
module.exports = (env)=>{
console.log(env); // { development: true }
}
合并配置文件
我们可以判断当前环境是否是开发环境来加载不同的配置,这里我们需要做配置合并
安装webpack-merge:
npm install webpack-merge --save-dev
webpack.dev配置
module.exports = {
mode:'development'
}
webpack.prod配置
module.exports = {
mode:'production'
}
webpack.base配置
const path = require('path');
const merge = require('webpack-merge');
// 开发环境
const dev = require('./webpack.dev');
// 生产环境
const prod = require('./webpack.prod');
const base = { // 基础配置
entry:'./src/index.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'../dist')
}
}
module.exports = (env) =>{
if(env.development){
return merge(base,dev);
}else{
return merge(base,prod)
}
}
后续的开发中，我们会将公共的逻辑放到base中,开发和生产对的配置也分别进行存放！
4.webpack-dev-server
配置开发服务器，可以在实现在内存中打包,并且自动启动服务
npm install webpack-dev-server --save-dev
"scripts": {
"build": "webpack --env.production --config ./build/webpack.base",
"dev": "webpack-dev-server --env.development --config ./build/webpack.base"
}
通过执行npm run dev来启启动开发环境
image
默认会在当前根目录下启动服务
配置开发服务的配置
const path = require('path')
module.exports = {
mode:'development',
devServer:{
// 更改静态文件目录位置
contentBase:path.resolve(__dirname,'../dist'),
compress:true, // 开启gzip
port:3000, // 更改端口号
}
}
5.打包Html插件
5.1 单入口打包
自动产生html，并引入打包后的文件
编辑webpack.base文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({
filename:'index.html', // 打包出来的文件名
template:path.resolve(__dirname,'../public/index.html'),
hash:true, // 在引用资源的后面增加hash戳
minify:{
removeAttributeQuotes:true // 删除属性双引号
}
})
]
5.2 多入口打包
根据不同入口 生成多个js文件，引入到不同html中
── src
├── entry-1.js
└── entry-2.js
多入口需要配置多个entry
entry:{
jquery:['jquery'], // 打包jquery
entry1:path.resolve(__dirname,'../src/entry-1.js'),
entry2:path.resolve(__dirname,'../src/entry-2.js')
},
output:{
filename:'[name].js',
path:path.resolve(__dirname,'../dist')
},
产生多个Html文件
new HtmlWebpackPlugin({
filename:'index.html',
template:path.resolve(__dirname,'../public/template.html'),
hash:true,
minify:{
removeAttributeQuotes:true
},
chunks:['jquery','entry1'], // 引入的chunk 有jquery,entry
}),
new HtmlWebpackPlugin({
filename:'login.html',
template:path.resolve(__dirname,'../public/template.html'),
hash:true,
minify:{
removeAttributeQuotes:true
},
inject:false, // inject 为false表示不注入js文件
chunksSortMode:'manual', // 手动配置代码块顺序
chunks:['entry2','jquery']
})
以上的方式不是很优雅，每次都需要手动添加HtmlPlugin应该动态产生html文件，像这样:
let htmlPlugins = [
{
entry: "entry1",
html: "index.html"
},
{
entry: "entry2",
html: "login.html"
}
].map(
item =>
new HtmlWebpackPlugin({
filename: item.html,
template: path.resolve(__dirname, "../public/template.html"),
hash: true,
minify: {
removeAttributeQuotes: true
},
chunks: ["jquery", item.entry]
})
);
plugins: [...htmlPlugins]
6.清空打包结果
可以使用clean-webpack-plugin手动清除某个文件夹内容:
安装
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
new CleanWebpackPlugin({
// 清空匹配的路径
cleanOnceBeforeBuildPatterns: [path.resolve('xxxx/*'),'**/*'],
})
这样就可以清空指定的目录了,我们可以看到webpack插件的基本用法就是 new Plugin并且放到plugins中
网友评论