entry[入口]
依赖图
- 全部打包成.js .css .jpg .png
根据入口文件找到依赖
单入口
module.exports = { entry: "./src/index.js", // 打包文件入口文件 }多入口
```javascript module.exports = { entry: “./src/index.js”, // 打包文件入口文件 appentry: “./src/appentry.js” }
// 也可以是数组‘ module.exports = { entry: [‘./fileA.js’, ‘fileB.js’] }
<a name="NZ1Tn"></a>
### output[出口]
- 将编译好的文件输出到磁盘
<a name="KgulV"></a>
#### 单入口配置
```javascript
module.exports = {
entry: "./src/index.js", // 打包文件入口文件
output: {
filename: "built.js", // 输出文件名
path: path.join(__dirname, "build") //输出路径
}
}
多入口配置
通过占位符确保文件名称的唯一
module.exports = { entry: "./src/index.js", // 打包文件入口文件 search: "./src/search.js" output: { filename: "[name].js", // 输出文件名 path: path.join(__dirname, "/build") //输出路径 } }Loaders
webpack开箱即用，只支持JS和json 两种类型文件，通过loaders 去支持其他文件类型并把他们转换成有效的模块，并且可以添加到依赖图中
-
常见的loaders
loader用法
test 指定匹配规则
- use 指定使用的loader名称
```javascript
module.exports = {
module: {
rules: [
] } }{ test: /\.(js|jsx)$/, //匹配规则 use: "babel-loader", //使用的loader问价 exclude: /(node_modules)/,//排除资源 }
<a name="Y685W"></a>
### Plugins
- **任何loader无法完成的功能plugins 可以完成**
- **作用于整个构建过程**
- **用于 bundle 文件的优化，资源管理和环境变量的注入**
<a name="M0Jj9"></a>
#### 常见的Plugins
- htmlWebpackPlugin, 动态的生成 HTML 文件
- UglifyWebpackPlugin, 压缩js文件
<a name="ZHOz6"></a>
### mode[环境模式]
- production -- 生产环境
- development -- 开发环境
- 默认-- production
<a name="wksxk"></a>
#### 内置功能函数
<a name="gA2XI"></a>
### 资源解析
<a name="QD31n"></a>
#### 解析ES6
- **使用babel-loader**
- **babel的配置文件是 .babelrc**
```javascript
npm i @babel/core@7.4.4 @babel/preset-env@7.4.4 babel-loader@8.0.5 -D
.babelrc 配置
{
"presets": [
"@babel/preset-env"
]
}
webpack.config.js 配置
module.exports = {
entry: {
index: "./src/index.js",
search: "./src/search.js"
},
// devtool: 'cheap-module-source-map',
output: {
filename: "[name].js", // 输出文件名
path: path.resolve(__dirname, "dist") //输出路径
},
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/, //匹配规则
use: "babel-loader", //使用的loader问价
exclude: /(node_modules)/,//排除资源
},
]
},
}
解析JSX
- 在babelrc 文件中的 presets 中添加 @babel/presets-react
在src目录下引入 组件，比如 search.js ```javascript import React from ‘react’ import ReactDom from ‘react-dom’npm i react react-dom @babel/preset-react -D
class Search extends React.Component { render() { return
Search Text
}
}
ReactDom.render(
在默认目录 dist 下创建 index.html 文件 引入 根节点 root 和 打包好的 search.js 文件
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>search</title>
</head>
<body>
<div id="root"></div>
<script src="./search.js"></script>
</body>
</html>
解析CSS | LESS | SASS
- css-loader 用户加载 .css 文件，并且转换成 commonjs 对象
style-loader 将样式 通过
若有收获，就点个赞吧
0 人点赞
