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中使用Loader_处理Less文件
安装
温馨提示
需要安装less和less-loader两个包
npm instal --save-dev less@4.1.3 less-loader@11.0.0
修改配置
修改 webpack.config.js 配置文件
const path = require('path'); module.exports = { module: { rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ] } };
增加 less 文件引入到项目中
import "../src/css/style.less"
Webpack中使用Loader_处理Sass文件
我想 webpack 能打包scss\sass文件类型
安装
温馨提示
需要安装sass和sass-loader两个包
npm instal --save-dev sass@1.52.3 sass-loader@13.0.0
修改配置
修改 webpack.config.js 配置文件
module.exports = { module: { rules: [ { test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader'] } ] } };
增加 scss 文件引入到项目中
import "../src/css/style.scss"
Webpack中使用插件_HTML插件
html-webpack-plugin 可以帮助我们将 src 的 index.html 复制一份到项目的根目录中
安装
npm install html-webpack-plugin@5.5.0 --save-dev
配置插件
const HtmlPlugin = require('html-webpack-plugin') module.exports = { plugins: [ new HtmlPlugin({ template: './src/index.html', //指定源文件的存放路径 filename: './index.html' // 指定生成的文件的存放路径 }) ] };
温馨提示
会自动帮打包好的bundle.js 自动放进index.html 的底部
Webpack分离CSS文件
当前的打包，是将JavaScript和CSS同时打包进入了一个文件中，如果CSS很小其实是有优势的，但是如果CSS很大，那么这个文件就应
该单独抽离出来我们可以使用 mini-css-extract-plugin 进行分离CSS
安装
npm install --save-dev mini-css-extract-plugin@2.6.1
修改配置文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader'] }, { test: /\.(scss|sass)$/, use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader'] } ] }, plugins: [ new MiniCssExtractPlugin({ filename:"./css/index.css" }) ] };
温馨提示
mini-css-extract-plugin 与 style-loader 冲突，需要删除 style-loader
Webpack压缩CSS文件
通过 mini-css-extract-plugin 分离出来的CSS文件并没有经历压缩，所以我们需要单独进行压缩，如何操作呢？
安装
通过 optimize-css-assets-webpack-plugin 进行压缩CSS文件
npm install --save-dev optimize-css-assets-webpack-plugin@6.0.1
修改配置文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader"] }, { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader",'less-loader'] }, { test: /\.(scss|sass)$/, use: [MiniCssExtractPlugin.loader, 'css-loader',"postcss-loader", 'sass-loader'] } ] }, plugins: [ new MiniCssExtractPlugin({ filename:"./css/index.css" }), new OptimizeCSSAssetsPlugin() ] };
Webpack中配置Babel
走到此时很多小伙伴可能会发现问题，我们现在写的ES6代码，为啥能正常运行呢？
那是因为我们目前用的是 Chrome 浏览器，默认就支持，但是如果一些浏览器无法支持怎么办?
我需要使用 babel 进行编译
安装
npm install --save-dev @babel/core@7.18.5 npm install --save-dev @babel/preset-env@7.18.2 npm install --save-dev babel-loader@8.2.5
增加配置文件"babel.config.js"
在项目根目录下增加 babel.config.js 的配置文件
// babel.config.js module.exports = { presets: ['@babel/preset-env'] }
修改配置文件
module: { rules: [ { test:/\.js$/, use:['babel-loader'] }, ] }
温馨提示
通过观察打包之后的文件，在添加babel之前和之后的区别
