携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情
webpack简介
webpack是什么？
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 ------------ 来自官网
官方网站
安装与使用
全局安装：npm install webpack webpack-cli
局部安装： npm install --save-dev webpack webapck-cli
npx使用：npx webpack
查看webpack版本：webpack -v
webpack基本概念
创建一个项目目录，执行 npm init 初始化项目，项目安装webpack npm i webpack webpack-cli ，在项目目录中新建public目录、src目录，得到如下的项目目录，新建 webpack.config.js 文件：
接着来理解几个重要的概念：
entry 入口
入口起点(entry point) 指定webpack 使用什么模块作为构建依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js ，可以在配置文件中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
};
output 输出
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "index.bundle.js",
}
};
一个最简单的webpack就配置好了，现在在终端执行
webpack看看吧
loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
loader 有两个属性：
test属性，识别出哪些文件会被转换。use属性，定义出在进行转换时，应该使用哪个 loader。
webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "index.bundle.js",
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
};
对一个单独的 module 对象定义了
rules属性，里面包含两个必须属性：test和use。webpack在编译时，如果遇到require()、import导入模块的文件后缀是.txt，会先使用raw-loader转换一下。
plugin 插件
插件用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
在使用插件时，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
在src目录中新建index.html文件，安装插件 html-webpack-plugin，执行 npm i html-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "index.bundle.js",
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
};
html-webpack-plugin为应用程序生成一个 HTML 文件，并自动将生成的所有 bundle 注入到此文件中。执行webpack看看吧
mode 模式
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，默认值为 production。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "./src/index.js"),
output: {
path: path.join(__dirname, "./dist"),
filename: "index.bundle.js",
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
mode: "production", //生产模式 development：开发模式
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
};
至此，一个简单webpack配置就完成了，在终端执行
webpack查看结果吧。
