安装 Webpack
官网搜索(webpack)
npm install -g webpack@4 webpack-cli@3
或
yarn global add webpack@4 webpack-cli@3
Webpack
作用
- 转译代码 (ES6 转为 ES5, SCSS 转为 CSS)
- 构建 build
- 代码压缩
- 代码分析
webpack-dev-server
- 用于本地预览
目标一
- 用 Webpack 转译 JS
mkdir webpack-demo
cd webpack-demo
npm init -y
yarn add webpack@4 webpack-cli@3 --dev
// 运行 webpack
.\node_modules\.bin\webpack
或
// npx 自动查找 (不够稳定)
npx webpack
初始化 webpack.config.js
const path = require('path');
module.exports = {
mode: 'development', // 给开发者看的, production 给用户看
};
webpack 配置 entry 和 output
const path = require('path');
module.exports = {
mode: 'development', // 给开发者看的, production 给用户看
// 将 entry 内的文件 输出到 output 指定的地方, 并改名未给定的名字
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js', // 将
},
};
目标二
- 理解文件名中的 hash 的用途
附加知识
- HTTP 响应头中的 Cache-Control
- public
- max-age = '时间' // 31536000 (一年)
HTTP 缓存
- 将加载过的不更改的内容缓存到浏览器里
- 再次加载网页只需要加载更新的部分，剩下的在浏览器缓存里加载
遇到了个问题
vscode 自带终端无法运行yarn
1.确认勾选以管理员身份运行此程序
2.重新打开vscode，打开终端执行下面2个命令
get-ExecutionPolicy // 查看执行策略
set-ExecutionPolicy RemoteSigned // 设置执行策略
目标三
- 用 webpack 生成 HTML
- 如何自动改文件名
// 终端
npm install --save-dev html-webpack-plugin
// webpack.config.js
// JS 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
plugins: [new HtmlWebpackPlugin({
title: 'My App',
template: 'src/assets/index.html' // 臫所给模板生成 html
})],
};
目标四
- 用 webpack 引入 CSS
- 可以使用 JS 生成 style
- 也可以把 CSS 抽成文件
npm install --save-dev css-loader
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
使用 webpack-dev-server
- 快速开发
npm install --save-dev webpack-dev-server
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// webpack.config.js
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
+ devServer: {
+ static: './dist',
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};
使用插件提取 CSS 文件
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
loader 和 plugin 的区别
- loader: 加载器
- load 文件
- plugin: 插件
- 加强功能
目标五
- 用 webpack 引入 SCSS
- node-sass 已经过时
- 使用 dart-sass
yarn add sass-loader dart-sass --dev
import './style.scss'
module:{
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
}
]
}
目标六
- 用 webpack 引入 LESS 和 Stylus
// 安装 LESS
yarn add less --dev
yarn add less-loader --dev
rules: [
{
test /\.less$/,
loader: ['style-loader','css-loader','less-loader']
}
]
// 安装 Stylus
yarn add stylus-loader stylus --dev
rules: [
{
test /\.less$/,
loader: ['style-loader','css-loader','stylus-loader']
}
]
- SASS、LESS、Stylus 完全没区别，直接改后缀 (Stylus 的后缀是 styl)
- LESS 和 stylus 可以声明变量:
@color: red
目标七
- 用 webpack 引入图片
import png from '路径'
rules: [
{
test /\.(png | svg | jpg | gif)$/,
loader: ['file-loader']
}
]
div.innerHTML = `<img src="${png}">`
- 一切引入都得转成 JS
目标八
- 使用懒加载
const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = ()=>{
const promise = import('./lazy')
promise.then((module)=>{
const fn = module.default
fn()
}, ()=>{})
}
div.appendChild(button)
目标九
- 一键部署到 GitHub Pages
// 创建脚本 deploy.sh
yarn build &&
git checkout gh-pages &&
rm -rf *.html *.js *.css *.png &&
mv dist/*./ &&
rm - rf dist;
git add . &&
git commit -m 'update' &&
git push &&
git checkout -
// 运行脚本文件
sh ./deploy.sh
