文章目录
前言
今天我们来从零开始搭建一个项目,并实现用webpack打包和优化
一、安装
yarn add webpack webpack-cli -D
二、构建项目目录
1.在项目根目录创建webpack.config.js
2.创建dist目录作为打包输出路径
3.创建index.js作为入口文件
整体结构如下
三、修改配置
1.修改webpack.config.js中配置,导出一个对象
module.exports = {
};
2.修改配置
const path = require('path');
module.exports = {
// 模式;devlopment开发;production生产;webpack会根据模式的不同自动启用一些优化方式;
mode: 'development',
// 入口文件目录
entry: './index.js',
// 输出目录
output: {
// 打包后的文件名
// filename: 'app.bound.js',
// 也可以拼接哈希值和文件名称 index会被转义为main,如下输出文件名称为:main.哈希值.js
filename: '[name].[fullhash].js',
// 输出绝对路径
path: path.resolve(__dirname, 'dist'),
},
};
3.执行
执行webpack命令就可以完成对项目的打包,会在dist目录下输出打包后文件;
webpack
四、常用配置项
webpack默认只能打包js文件,对html,css等的打包需要配置loader使用;
1.打包css
1.安装css-loader style-loader;
css-loader 会对 @import 和 url() 进行处理,就像 js 解析 import/require() 一样。
style-loader把 CSS 插入到 DOM 中
yarn add css-loader style-loader -D
2.配置css规则
module: {
// module.rules中配置对文件的处理规则
rules: [
{
// 使用正则匹配文件名称
test: /\.css$/i,
// 对匹配到的文件应用loader,多个loader遵循先右后做的执行规则
use: ['style-loader', 'css-loader'],
},
],
},
3.测试一下效果:
// main.css
.demo{
width:200px;
height: 200px;
background-color: pink;
}
// index.js
import './main.css';
执行webpack进行打包,打包后可以看到css和js文件是在一起的,没有单独分离开;
4.抽离css
4.1安装mini-css-extract-plugin
yarn add mini-css-extract-plugin -D
4.2使用
// 引入
const miniCssExtractPligin = require('mini-css-extract-plugin');
// 使用
// 在webpack的pluin中注册
plugins: [new miniCssExtractPligin()]
// 用miniCssExtractPligin替代style.loader
{
// 使用正则匹配文件名称
test: /\.css$/i,
// 对匹配到的文件应用loader,多个loader遵循先右后做的执行规则
use: [miniCssExtractPligin.loader, 'css-loader'],
},
4.3效果
打包后css已经是一个单独的文件了
2.打包scss
scss文件是不能被浏览器识别的,所以我们需要借助loader将他打包为css
// 安装
yarn add -D sass-loader sass
// 配置scss规则
{
test: /\.scss/i,
use: [miniCssExtractPligin.loader, 'css-loader', 'sass-loader'],
},
这里有个小坑,scss的loader是sass-loader,刚开始搜scss-loader一直找不到,给大家提个醒。
3.打包html
该插件将为你生成一个 HTML5 文件, 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。并能自动引入css
// 安装
yarn add html-webpack-plugin
// 使用
const htmlWebpackPlugin = require('html-webpack-plugin');
// plugin中注册使用
new HtmlWebpackPlugin({ template: './index.html' }),
常用的配置参数
4.打包静态资源
webpack默认提供了处理静态资源的方法,只需增加如下配置即可;
但是注意:图片打包后路径和名称会发生改变,静态引入时会发现图片无法加载;可以使用动态引入的方式解决;
// 处理静态资源
{
test: /\.(png|jpg|gif|svg)$/i,
type: "asset",
},
5.js降级
用于将es6语法降级,适配各版本浏览器;
安装
yarn add babel-loader @babel/core @babel/preset-env -D
配置
// js降级
{
test: /\.js$/i,
// 排除node_modules下的文件
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
// 降级es6
presets: ['@babel/preset-env'],
},
},
],
},
bable打包后会引用一些辅助方法,导致代码体积增大,可以引入 @babel/plugin-transform-runtime 使所有辅助代码从这里引用。
具体操作:
安装
yarn add @babel/plugin-transform-runtime @babel/runtime -D
配置参数修改为:
options: {
// 降级es6
presets: ['@babel/preset-env'],
// 修改辅助代码引入
plugins: ['@babel/plugin-transform-runtime'],
},
6.删除旧的打包文件
webpack每次打包不会清除上一次打包的文件,我们需要配置一下:
安装
yarn add clean-webpack-plugin -D
配置
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// plugin中
new CleanWebpackPlugin(),
截至到现在,已经可以完成一个基本的打包工作了,接下来我们看下webpack服务。
五.配置webpack-dev-server
配置webpack-dev-server可以实现浏览器与本地文件的实时通讯,本地资源变化时,向浏览器重新推送资源;
安装
yarn add webpack-dev-server -D
配置
devServer: {
// 配置目录
static: {
directory: path.join(__dirname, 'dist'),
},
// 端口号
port: 9000,
},
启动
webpack serve
六、快捷启动命令
可以通过package.json配置快捷启动命令
"scripts": {
"build": "webpack",
"serve": "webpack serve"
}
然后就可以通过yarn build / yarn serve 启动了
ok,基础篇就到这里,接下来我们看webpack打包优化;