webpack是一个动态模块打包工具，基于node.js开发。在开启webpack coding之前，咱们先理解一些外围概念。
一. 外围概念
1.Entry
主入口，用来通知webpack从哪个模块开始，它会找出哪些模块或库是入口模块（间接或间接）的依赖
2.Output
通知 webpack 在哪里输入它所创立的 bundle，以及如何命名这些文件
3.Loader
在webpack中，万物皆模块。它自身只能了解 json和js文件。loader 让 webpack 可能去解决其余类型的文件，并将它们转换为无效模块，以供应用程序应用，以及被增加到依赖图中。
比方： xx.vue, xx.ts, xx.scss 模块，须要应用对应的loader，转化为 webpack 意识的格局。
loader具备以下个性：
- loader能够是同步的，也能够是异步的。
- loader能够在nodejs中执行
- loader反对链式调用，一组链式loader将依照相同程序执行。链中的第一个 loader 将其后果（也就是利用过转换后的资源）传递给下一个 loader，依此类推。最初，链中的最初一个 loader，返回 webpack 所冀望的 JavaScript。
4.Plugin
loader 用于转换某些类型的模块，而插件则能够用于执行范畴更广的工作。包含：打包优化，资源管理，注入环境变量等。
5.Mode
构建模式，通知webpack是开发环境还是生产环境。 通过抉择 development, production 或 none 之中的一个，来设置 mode 参数。
6.浏览器兼容
webpack 反对所有合乎 ES5 规范 的浏览器（不反对 IE8 及以下版本）
7.运行环境
运行环境是node.js。有许多刚入门的小伙伴，误认为是浏览器，在此揭示下~
筹备工作ok，上面咱们进入微妙的webpack之旅吧~
二. hello world
上面，咱们先初始化一个我的项目，执行：
npm init testtouch webpack.config.js index.html index.js index.cssyarn add -D webpack@4.43.0 webpack-cli@3.3.11 html-webpack-plugin@4.3.0编辑index.html
<html> <head> <meta charset="utf-8"/> </head> <body> <div id='root' class="root"></div> </body></html>编辑index.js
console.log("hello world")编辑webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { // 主入口文件 entry: __dirname + "/index.js", // 输入文件 output: { filename: 'bundle.js', path: __dirname + "/dist" }, // 开发模式 mode: "development", // 插件 plugins: [ new HtmlWebpackPlugin({ template: "index.html" }) ],}编辑package.json
"scripts": { "dev": "webpack --progress" },执行 npm run dev，关上浏览器 http://localhost:8080，
咱们的第一个程序，hello world 胜利啦~
三. Loader
webpack所有皆模块，但它只能解决js和json文件。
1. 如果咱们须要在js文件中应用es6语法，该如何操作呢？
这个时候，咱们须要babel
装置
yarn add -D @babel/core@7.9.6 babel-loader@8.1.0 在webpack中增加loader配置
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { // 主入口文件 entry: __dirname + "/index.js", // 输入文件 output: { filename: 'bundle.js', path: __dirname + "/dist" }, // 开发模式 mode: "development", // 插件 plugins: [ new HtmlWebpackPlugin({ template: "index.html" }) ], // 增加loader module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader" }, exclude: /node_modules/ } ] }}测试
touch test.js在test.js文件中，增加如下代码：
export function Hi() { return "hi es6";}在index.js中援用
import { Hi } from "./test";let res = Hi();console.log(res); // hi es6到这里，咱们能够欢快的应用es6 coding啦~
2. 如果咱们须要增加css文件，该如何操作呢？
这个时候，咱们须要css-loader, style-loader
装置
yarn add -D css-loader style-loader批改webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = { // 主入口文件 entry: __dirname + "/index.js", // 输入文件 output: { filename: 'bundle.js', path: __dirname + "/dist" }, // 开发模式 mode: "development", // 插件 plugins: [ new HtmlWebpackPlugin({ template: "index.html" }) ], // 增加loader module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, // 增加css-loader, style-loader { test: /\.css$/, use: ["style-loader", "css-loader"] }, ] }}留神：webpack执行style-loader, css-loader时， 从右往左执行，程序不可颠倒
测试
批改index.js
import { Hi } from "./test";// 引入css文件import "./index.css";let res = Hi();console.log(res);index.css
.root { width: 100%; height: 100%; background: blue;}这个时候，咱们会看到页面变成了蓝色，款式问题搞定，能够欢快的编写css啦~
3. 如果咱们须要增加.vue文件，该如何操作呢？
这个时候，咱们须要尤大的vue-loader
装置
yarn add -D vue-loader@15.9.5 vue-template-compiler@2.6.12yarn add vue@2.6.12批改webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");const { VueLoaderPlugin } = require("vue-loader");module.exports = { // 主入口文件 entry: __dirname + "/index.js", // 输入文件 output: { filename: 'bundle.js', path: __dirname + "/dist" }, // 开发模式 mode: "development", // 插件 plugins: [ new HtmlWebpackPlugin({ template: "index.html" }), // 增加vue loader 插件 new VueLoaderPlugin(), ], // 增加loader module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, // 增加css-loader, style-loader { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 增加.vue loader { test: /\.vue$/, loader: "vue-loader" }, ] }}测试
批改index.js
// 引入css文件import "./index.css";import Vue from "vue";// 引入vue文件import HelloVue from "./hello.vue";new Vue({ render: h => h(HelloVue)}).$mount('#root');当前目录下：增加hello.vue文件
<template> <div>你好 vue</div></template><script>export default { data() { return { } } }</script><style scoped></style>vue-loader配置胜利，咱们能够欢快的编写vue啦~
其实其余文件也相似，咱们只须要应用对应的loader去解析对应的文件，就能够了。
loader的实质，将webpack不意识的文件，转化为webpack可辨认的格局
四. Plugin
plugin 用于扩大 Webpack 性能，各种各样的 Plugin 简直让 Webpack 能够做任何构建相干的事件。
plugin 的配置很简略，plugins 配置项承受一个数组，数组里每一项都是一个要应用的 plugin 的实例。
举个????：
咱们在构建时，须要理解构建的进度，那么咱们这个时候须要插件来解决。
装置
yarn add -D progress-bar-webpack-plugin@1.11.0批改webpack.config.js配置
const HtmlWebpackPlugin = require("html-webpack-plugin");const { VueLoaderPlugin } = require("vue-loader");// 增加进度条插件const ProgressBarPlugin = require("progress-bar-webpack-plugin");module.exports = { // 主入口文件 entry: __dirname + "/index.js", // 输入文件 output: { filename: 'bundle.js', path: __dirname + "/dist" }, // 开发模式 mode: "development", // 插件 plugins: [ new HtmlWebpackPlugin({ template: "index.html" }), // 增加vue loader 插件 new VueLoaderPlugin(), // 应用进度条插件 new ProgressBarPlugin() ], // 增加loader module: { rules: [ { test: /\.js$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, // 增加css-loader, style-loader { test: /\.css$/, use: ["style-loader", "css-loader"] }, // 增加.vue loader { test: /\.vue$/, loader: "vue-loader" }, ] }}测试
构建进度条插件增加胜利~
应用 Plugin 的难点在于把握 Plugin 自身提供的配置项，而不是如何在 Webpack 中接入 Plugin。
简直所有 Webpack 无奈间接实现的性能都能在社区找到开源的 Plugin 去解决。
到这里，咱们曾经入门了webpack的基本操作。码字不易，还请多多关注~????