什么是webpack
本质上webpack 是一个JavaScript 静态模块打包器，同时它还能处理非JavaScript模块；
利用webpack可以将我们的前端工程代码打包成适应于浏览器运行的代码；
webpack的基本概念
entry
entry(入口)用来指明webpack进行打包的入口文件；
output
output(输出)用来指明webpack打包后的bundles文件存放的路径；
loader
webpack自身只理解javascript文件，loader可以用来处理那些非javascript文件(或者说是模块)；
plugins
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，如提取css、添加sourcemap功能、复制文件等；
webpack工作流程
了解了webpack作用及基本概念后，我们来看下webpack具体是怎么运用这些概念来进行工作的吧；工作流程如下图
首先通过执行webpack命令来进行打包；(一般我们会在package.json中配置类似build的脚本，然后通过 npm build间接执行webpack)
接着webpack会读取webpack.config.js文件进行参数初始化；
接着通过entry找到入口文件；
接着调用匹配到的loader处理入口文件，然后寻找文件的依赖文件继续调用loader处理；递归处理直至所有依赖都被处理完为止；
最终将处理完的文件输出；
这其中webpack会发出广播事件，相应的插件会接收广播事件来对打包过程进行额外的处理；
一个简单的webpack示例
该demo只是一个最基本的例子，真实项目上配置要比这个复杂的多
代码地址：https://github.com/shejiJiang/webpack-demo
以下是示例中webpack.config.js的内容，其中配置了打包的入口、输出的文件名及路径，同时配置了style-loader、css-loader两个loader来处理css文件；
const path = require('path');
module.exports = {
// 配置入口为./src/index.js文件
entry: './src/index.js',
// 配置输出文件名、路径
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 通过module.rules配置loaders
module: {
rules: [
{
// 处理.css文件
test: /\.css$/,
// 使用style-loader、css-loader两个loader来处理
use: [
'style-loader',
'css-loader'
]
}
]
}
};
package.json文件配置了相应的依赖，以及build脚本
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "node_modules/.bin/webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^3.0.0",
"lodash": "^4.17.11",
"style-loader": "^0.23.1",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5"
}
}
index.html直接引用了打包后的js文件
<!doctype html>
<html>
<head>
<title>webpack-demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
demo用法：
yarn
yarn build
浏览器直接打开index.html文件
