前端工程化
介绍
webpack安装
支持符合ES5规范的浏览器
但是import promise
就要使用下面,让旧浏览器也支持
webpack核心概念
https://www.webpackjs.com/
webpack4之后webpack和webpack-cli已经分离开来了
Loader和plugins区别
Loader处理的是webpack不能处理的文件(除了js外)
plugins做一些更加复杂的内容
npm init -y
快速初始化项目
npm install webpack webpack-cli -D
yarn add webpack webpack-cli -D
npx webpack --version
方式一: ./node_moudles/.bin/webpack --version
npm5以后提供npx指令
npm install webpack -g
全局安装webpack
yarn global add webpack webpack-cli
配置
入口起点 entry points
输出 output
loader
yarn add css-loader style-loader -D
- src/index.css
body {
background : blue;
}
- index.js
require("./index.css")
如果换位置就会报错
如果
yarn add sass-loader -D
yarn add sass -D
npm run build
plugins
yarn add html-webpack-plugin -D
npm run watch
修改js
HMR
模块热替换
配合webpack-dev-server或者webpack-dev-middleware使用,webpack-dev-server启动了一个运行环境,让webpack可以直接在浏览器执行刷新操作
yarn add webpack-dev-server -D
npm run hot
mode
production
development
process.env.NODE_ENV
babel
让webpack支持ES6特性
安装
yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
yarn add @babel/runtime -S
根目录创建.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}
配置webpack.js rules
{
test: /\.js$/,
loader: "babel-loader",
},
测试
注意
clean-webpack-plugin
清除我们构建文件夹
https://github.com/johnagan/clean-webpack-plugin
yarn add clean-webpack-plugin -D
配置webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
copy-webpack-plugin
复制一些静态资源文件
yarn add copy-webpack-plugin -D
配置webpack.config.js
const copyWebpackPlugin = require("copy-webpack-plugin");
new copyWebpackPlugin([
{
from: path.join(__dirname, "assets"),
to: "assets",
},
]),
测试
terser-webpack-plugin
该插件使用 terser 来压缩 JavaScript。
如果你使用的是 webpack v5 或以上版本,你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4,则必须安装 terser-webpack-plugin v4 的版本。
yarn add terser-webpack-plugin -D
optimize-css-assets-webpack-plugin
一个用于优化\最小化 CSS 资产的 Webpack 插件。
⚠️对于 webpack v5 或更高版本,请改用css-minimizer-webpack-plugin。
yarn add optimize-css-assets-webpack-plugin -D
mini-css-extract-plugin
yarn add mini-css-extract-plugin -D
上面三个一起引入
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
上面三个一起配置
// 修改scss规则
rules: [
{
test: /\.(scss|sass)$/,
// use: ["style-loader", "css-loader", "sass-loader"],
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
// 添加css
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
与module/plugins/devServer同级
optimization: {
minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})],
},
配置plugins
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
上面三个压缩一起测试
webpack应用总结
配置代码
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const config = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.(scss|sass)$/,
// use: ["style-loader", "css-loader", "sass-loader"],
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.js$/,
loader: "babel-loader",
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
optimization: {
minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})],
},
devServer: {
hot: true,
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
}),
new HtmlWebpackPlugin({
filename: "index.html",
template: "template.html",
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
// new copyWebpackPlugin([
// {
// from: path.join(__dirname, "assets"),
// to: "assets",
// },
// ]),
new copyWebpackPlugin({
patterns: [
{
from: path.join(__dirname, "assets"),
to: "assets",
},
],
}),
],
};
module.exports = config;