Webpack简介

我们思考一个问题：当前端项目越来越大的时候，我们还能按照以往的思维方式继续开发么

问题症结所在：文件管理、ES6代码的转换、项目的打包...

解决方案：前端工程化(Webpack)

前端工程化

在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

例如：

砌一堵墙：怎么简单怎么来，只要材料准备齐全，一个人直接干就行

一栋楼：需要很多大型机器，也需要更多的人，重要的必须要规范化干活，避免发生危险

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容

搭建Webpack环境

安装全局 webpack

npm install --save webpack@5.73.0
npm install --save webpack-cli@4.10.0

温馨提示

由于 webpack 版本更新迭代较快，为了避免版本带来的错误，在接下来的包安装中，都需要指定具体版本信息，如上述版本添加方式，请各位同学保持与老师一致的版本

创建本地项目文件夹

mkdir webpack_demo
cd webpack_demo

初始化项目

npm init

安装 webpack 到本地

npm install --save-dev webpack@5.73.0
npm install --save-dev webpack-cli@4.10.0

使用 webpack

创建项目结构 src 、 public

// src/show.js
export function show(content) {
 window.document.getElementById('root').innerText = 'Hello,' + content;
}

// src/index.js
import { show } from './show.js'
show('iwen');

执行 webpack

温馨提示
webpack会自动寻找src目录，然后寻找index.js入口文件，然后进行打包，最终生成一个dist目录为打包后内容。

在 public 下创建 index.html ，引入自动生成的 main.js 文件

<!-- index.html -->
<div id="root"></div>
<script src="../dist/main.js"></script>

Webpack增加配置文件

webpack 可以增加配置文件，有了配置文件之后，可以更多的操作他

入口配置

在项目的根目录下创建 webpack.config.js 文件并输入以下代码

module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
};

出口配置

在 webpack.config.js 文件增加出口配置代码

const path = require('path');
module.exports = {
 // JavaScript 执行入口文件
 entry: './src/index.js',
 output: {
  // 把所有依赖的模块合并输出到一个 bundle.js 文件
  filename: 'bundle.js',
  // 输出文件都放到 dist 目录下
  path: path.resolve(__dirname, './dist'),
}
};

然后我们在执行 webpack命令，此时就会默认执行 webpack.config.js 他会按照配置文件进行运行

Webpack中使用Loader

Webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 能让 webpack 能够去处理其他类型的文件（比如css类型文件，图片类型等），并将它们转换为有效模块，以供使用

Webpack 把一切文件看作模块，CSS 文件也不例外，所以想打包CSS需要安装 css-loader

安装 css-loader

npm install --save-dev css-loader@6.7.1

修改配置

修改 webpack.config.js 配置文件

const path = require('path');
module.exports = {
 module:{
  rules:[
   {
      test: /\.css$/,
      use: ['css-loader']
   }
 ]
}
};

增加CSS文件

在 index.js 文件中引入CSS文件

import "../src/css/index.css"

此时运行会发现，css样式让然是无法加载的，因为 css-loader 只是能识别css文件

要显示css样式还需要引入 style-loader 才可以

安装 style-loader

npm install --save-dev style-loader@3.3.1

修改配置

修改 webpack.config.js 配置文件

const path = require('path');
module.exports = {
 module:{
  rules:[
   {
      test: /\.css$/,
      use: ["style-loader",'css-loader']
   }
 ]
}
};

温馨提示

style-loader 和 css-loader 是存在先后顺序的，必须先写 style-loader 在写 css-loader

Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解（学习总结---从入门到深化）（下）：https://developer.aliyun.com/article/1420352