共计 2139 个字符，预计需要花费 6 分钟才能阅读完成。
概念
Webpack 是一种前端资源构建工具，一个动态模块打包器。一个前端我的项目中蕴含了很多资源，然而浏览器并不一定全副意识，比方 sass、less、ts，包含 js 里的高级语法。这些资源如果想在浏览器中失常工作，必须通过编译解决。而咱们的 Webpack 就是能够集成的解决这些文件，并且汇总到一个文件中。
Webpack 外围根底
entry
入口（entry）：代表着 Webpack 以那个文件为入口终点开始打包，剖析构建外部依赖图。默认值是 ./src/index.js，但你也能够通过配置 entry 属性，来指定一个（或多个）不同的入口终点。
module.exports = {entry: './path/to/my/entry/file.js'};output
输入（output）: 批示 Webpack 打包后到资源 bundles 输入到哪里，以及如何命名。次要输入文件的默认值是 ./dist/main.js，其余生成文件默认搁置在 ./dist 文件夹中。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};Loader
Loader：Webpack 本身只能了解 JavaScript 和 json 文件，loader 让 Webpack 可能解决其余文件。
const path = require('path');
module.exports = {
output: {filename: 'my-first-webpack.bundle.js'},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader'}
]
}
};plugin
插件（plugins）：能够用于执行范畴更广的工作。从打包优化和压缩，始终到从新定义环境中的变量等。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 装置
const webpack = require('webpack'); // 用于拜访内置插件
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [new HtmlWebpackPlugin({template: './src/index.html'})
]
};mode
模式（mode）: 批示 Webpack 应用相应模式的配置。默认为 production。
module.exports = {mode: 'production'};实际一下
理解完外围根底后，当初能够尝试着去试一试实现一个 Demo
首先先创立一个文件夹叫做”Webpack 初体验“，而后在其下创立一个 src 文件夹，如图所示
而后输出指令 npm init 进行我的项目初始化，并且装置 webpack 包
配置好环境就能够开始这个 Demo 了
首先咱们在 src 目录下创立以下几个文件，为前面打包做好筹备。
data.json 文件
{
"name": "Andy",
"age": 18
}Index.js 文件
/*
index.js: webpack 入口终点文件
1. 运行指令：开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack 会以 ./src/index.js 为入口文件开始打包，打包后输入到 ./build/built.js
整体打包环境，是开发环境
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack 会以 ./src/index.js 为入口文件开始打包，打包后输入到 ./build/built.js
整体打包环境，是生产环境
*/
import data from './data.json'
console.log(data)
function add(x, y) {return x + y;}
console.log(add(1, 2))而后输出打包指令，在这里加一点小内容，mode 中分为开发环境和生产环境。他们最终打包的内容体积大小都是不一样的。最终咱们能拿到 built.js 文件，如下图所示
这就是打包后的文件内容
Look LooK，这就是咱们最终把 js 文件以及 json 打包后的样子，而后创立一个 index.html 文件，在 index.html 文件中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../build/built.js"></script>
</body>
</html>最终，就能够在浏览器中顺利的运行这个 html 文件
