webpack.config.js配置项简介
Entry：入口文件配置，Webpack 执行构建的第一步将从 Entry 开始，完成整个工程的打包。
Module：模块，在Webpack里一切皆模块，Webpack会从配置的Entry开始递归找出所有依赖的模块，最常用的是rules配置项，功能是匹配对应的后缀，从而针对代码文件完成格式转换和压缩合并等指定的操作。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容，这个是配合Module模块中的rules中的配置项来使用。
Plugins：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。(插件API)
Output：输出结果，在Webpack经过一系列处理并得出最终想要的代码后输出结果，配置项用于指定输出文件夹，默认是./dist。
DevServer：用于配置开发过程中使用的本机服务器配置，属于webpack-dev-server这个插件的配置项。
webpack打包流程简介
- 根据传入的参数模式(development | production)来加载对应的默认配置
- 在entry里配置的module开始递归解析entry所依赖的所有module
- 每一个module都会根据rules的配置项去寻找用到的loader,接受所配置的loader的处理
- 以entry中的配置对象为分组，每一个配置入口和其对应的依赖文件最后组成一个代码块文件(chunk)并输出
- 整个流程中webpack会在恰当的时机执行plugin的逻辑，来完成自定义的插件逻辑
基本的webpack配置搭建
首先通过以下的脚本命令来建立初始化文件：
npm init -y // package.json
npm i webpack webpack-cli --save-dev // 针对webpack4的安装
mkdir src && cd src && touch index.js
cd ../ && mkdir static&& cd static && touch index.html
cd ../ &&touch webpack.config.js
npm i webpack-dev-server --save-dev
//static/ndex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id="root">
</div>
<script src="bundle.js"></script>
</body>
</html>
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',//使调试更容易
entry: __dirname + "/src/index.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方(默认dist)
filename: "bundle.js"//打包后输出文件的文件名(默认main.js)
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --open --mode development"
}
// --mode
打包编译
"build": "webpack --mode production",
启动编译
"dev": "webpack-dev-server --open --mode development",
网友评论