概念
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文件
发表回复