概念
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文件