为什么需要webpack
产生背景
项目中引入大量js文件会给网页加载带来很多问题。
首先是加载顺序，浏览器解析html的顺序是从上至下，引入第三方库时便会存在先后顺序问题，例如jQuery及其第三方库，其次，多个文件也会拖慢js文件载入速度，影响用户体验。
因此可以将多个js文件按照加载顺序整合成一个文件，既解决了先后顺序问题又提高了加载速度。
这样还是会有一些其他问题：
作用域：将所有的代码都直接打包到一个文件中，会使得所有变量成为全局变量，污染全局作用域。
模块化：例如第三方文件库lodash.js 只需要很少的几个功能，却需要将整个库引入项目，无法按需加载需要的模块，造成了资源浪费。
为了解决这些问题，使用立即调用函数表达式 IIFE 来创建独立作用域
变量被单独定义在函数内部，不再被挂载至全局window下
(function(){
var name = '123';
})()
console.log(name)
|
也可以通过具名函数得到变量
var result = (function(){
var name = '123';
return name;
})
console.log(name);
|
这种方式会存在大量无用的代码，文件体积太大，影响构建和加载效率，此时出现了代码拆分，即模块化。
优化方案
commonJS
这是一种在nodeJS环境下（浏览器环境下无法直接使用）的解决方法，通过module.exports和require实现模块化。
// math.js
const add = (x, y) => x + y;
const minus = (x, y) => x - y;
module.exports = {
add,
minus,
};
// server.js
const math = require("./math");
console.log(math.add(1, 3));
|
requireJS
在浏览器下使用的，可以使类似commonJs的模块在浏览器运行,通过define和require实现
const add = (x, y) => x + y;
define([], function () {
return add;
});
require(["./add", "./minus"], function (add, minus) {
console.log(add(1, 2));
});
<!-- data-main：加载的入口js文件 -->
<script
src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"
data-main="./main.js"
></script>
|
ECMAScript
对于web项目，模块逐渐成为ECMAScript的标准，使用export和import实现。
// add.js
const add = (x, y) => x + y;
export default add;
<!
Access to script at 'file:///D:/vscode/WebpackDemo/ECMAScript/add.js' from origin 'null' has been blocked by CORS policy
<script type="module">
import add from "./add.js";
console.log(add(1, 2));
</script>
|
webpack
可以实现打包JS应用程序，也可以扩展支持很多的静态资源打包，并同时支持ES的模块化和commonJS。
webpack与竞品的比较
parcel
配置简单，一般无需做其他的配置开箱即用。适合构建一个简单，可以快速运行的应用。
rollup.js
用标准化的格式编写代码，如ES6，通过减少无用的代码，尽可能的缩小包的体积。一般只能用来打包js。适合构建一个简单的类库，只需要导入很少的第三方的库。
Vite
是未来vue的搭建工具，可以完成开发，编译，发布，demo。Vite采用基于ESModule的构建方式，可以按需编译，支持模块热更新等。
webpack
适合复杂的，需要继承很多第三方库，需要拆分代码，需要使用静态资源文件，支持common.js，esModule的应用。
webpack除了可以引入js，还可以使用内置的资源模块asset modules来引入任何的其他类型资源。
开发准备
安装webpack
1.安装 Node.js
2.验证node版本 npm版本
3.npm init -y 初始化package配置文件
4.npm install webpack webpack-cli --save-dev 本地安装webpack及webpack-cli
自定义webpack配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
clean: true,
},
mode: 'development',
devtool: 'inline-source-map'
};
|
插件
webpack在打包流程中产生的编译过程，可以借助插件实现某些功能。
html-webpack-plugin
安装插件：npm install html-webpack-plugin -D
配置插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
clean: true,
},
mode: 'development',
devtool: 'inline-source-map',
plugins: [new HtmlWebpackPlugin({
template: "./index.html",
filename: "app.html",
inject: "body",
})],
};
|
搭建开发环境
watch mode
打包实时更新，不需要手动重新执行打包的命令，当源代码改变时，会自动重新运行，打包新的文件。
使用 webpack-dev-server
webpack-dev-server提供了一个基本的web server，并且具有live reloading（实时加载）的功能。不但能监测文件的变化重新编译，还能实现浏览器的自动刷新。 安装：
npm install webpack-dev-server -D
|
配置：
module.exports={
...
devServer:{
static:'./dist'
},
}
|
启动：
PS C:\Users\L\Desktop\Local\webpack\01> npx webpack-dev-server
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http:
<i> [webpack-dev-server] On Your Network (IPv4): http:
<i> [webpack-dev-server] Content not from webpack is served from './dist' directory
asset bundle.js 170 KiB [emitted] (name: main)
asset app.html 254 bytes [emitted]
runtime modules 27.4 KiB 12 modules
|
资源模块