所在位置:
- 首页
- 正文
安装和使用webpack
安装和使用webpack
这篇文章里会一步一步地教你如何使用 webpack,内容包括:
- webpack 5 的安装和命令行运行脚本
- 生成指定的 html 模板,并引用打包生成的文件
- 配置 entry 和 output
- 配置 devServer 服务器和实现热更新
- 配置 css 和 less
- 各种图片的处理
- 配置 babel-loader
- 配置每次清除生成的文件
- 加载字体的资源
- 区分开发环境和生产环境
至于一些相关的概念,请查看webpack的官网,下面是操作的步骤:
确定 node 和 npm 的版本
node -v # node 的版本为 v18.13.0
npm -v # npm 的版本为 8.19.3
初始化项目
$ mkdir webpack-project
$ cd webpack-project
$ npm init -y
安装 webpack 并在命令行下运行脚本
- 如果你使用的 webpack v4+ 版本,并且想要在命令行中调用
webpack
,你还需要安装 webpack-cli
# (webpack的版本为 ^5.89.0,webpack-cli 的版本为 ^5.1.4)
npm install webpack webpack-cli -D
# 或者使用npm install webpack@^5.89.0 webpack-cli@^5.1.4 -D
- 打开 package.json,在 scripts 对象里添加 "build": "webpack --mode production” 这一行,如下:
{
"name": "webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4"
}
}
- 新建一个 src/index.js 文件,并编辑输入 console.log(’Hello World’)
- 运行 npm run build,就会在 webpack-project 目录生成 dist 目录,dist 目录里有 main.js 文件
安装和配置 html-webpack-plugin 插件
- 这个插件可以动态生成 html 文件并把打包好的 js 引进来,安装如下:
npm install html-webpack-plugin -D
- 执行 webpack 的时候会默认读取这个 webpack.config.js 文件,新建一个 webpack.config.js,内容如下:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [new HtmlWebpackPlugin()]
}
- 再次运行 npm run build,就会在 dist 目录里生成 index.html 和 main.js 文件,并且 index.html 文件里包含了 main.js 的路径,但这个 index.html 是动态生成的,如果是想指定自己的 index.html 文件,修改 webpack.config.js 的内容如下:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
// 配置文件模板
template: path.resolve(__dirname, 'index.html')
})
]
}
配置入口和输出
- 默认入口文件是 ./src/index.js,输出默认是 ./dist/main.js,我们可以改变入口和输出的配置,webpack.config.js 的内容如下:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
plugins: [
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
// 配置文件模板
template: path.resolve(__dirname, 'index.html')
})
]
}
安装 devServer 服务器和实现热更新
- devServer 可以实时地查看页面的变化,在命令行执行下面的代码:
npm i webpack-dev-server -D
- 打开 package.json,在 scripts 对象里添加 "dev": "webpack server --mode development” 这一行,如下:
{
"name": "webpack-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack server --mode development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^5.5.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}
- 修改 devServer 的配置,编辑 webpack.config.js 的内容:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
// 配置文件模板
template: path.resolve(__dirname, 'index.html')
})
],
devServer: {
port: 9999,
open: true,
hot: true
}
}
- 修改 src/index.js 里的内容,修改如下:
if (module.hot) {
module.hot.accept();
}
console.log(’Hello World’)
- 再次运行 npm run dev,就会自动打开浏览器,并重定向到 http://localhost:9999 ,修改 src/index.js 文件的内容,就可以实现热更新了
安装 css 和 less 相关的 loader
- 在命令行执行下面的代码:
npm install style-loader css-loader less-loader -D
- 创建 less 文件,在命令行执行下面的代码:
cd webpack-project
cd src
mkdir assets
mkdir css less
touch css/reset.css less/index.less
- 修改 reset.css 的内容如下:
body {
margin: 0;
padding: 0;
}
- 修改 index.less 的内容如下:
body {
background: #ccc;
}
- 修改 src/index.js 文件,内容如下:
import './assets/css/reset.css'
import './assets/less/index.less'
console.log('test')
- 修改 webpack.config.js 文件,内容修改如下:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
module: {
rules: [
// 解释 css 文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
template: path.resolve(__dirname, 'index.html')
})
],
devServer: {
port: 9999,
open: true,
hot: true
}
}
处理各种图片
- 安装 url-loader,在命令行执行下面的代码:
npm install url-loader -D
在 src/assets/ 目录新建个 img 的目录,放一张png的图片
修改 src/index.js 文件,内容如下:
import './assets/css/reset.css'
import './assets/less/index.less'
import banner from './assets/img/banner.png'
console.log(banner)
- 修改 webpack.config.js 文件,内容修改如下:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
module: {
rules: [
// 解释 css 文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 解释图片
{
test: /\.(jpg|gif|jpeg|png)$/,
use: [
// 生成 base64位的图片
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
template: path.resolve(__dirname, 'index.html')
})
],
devServer: {
port: 9999,
open: true,
hot: true
}
}
- 运行 npm run dev,就会在浏览器的控制台上看到base64的图片了
安装babel相关的loader
- 在命令行执行下面的代码:
npm install @babel/core @babel/preset-env babel-loader -D
- 在根目录下创建一个 .babelrc 文件,内容如下:
{
"presets": [
"@babel/preset-env"
]
}
- 修改 webpack.config.js 文件,内容修改如下:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
module: {
rules: [
// 解释 js 文件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// 解释 css 文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 解释图片
{
test: /\.(jpg|gif|jpeg|png)$/,
use: [
// 生成 base64位的图片
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
template: path.resolve(__dirname, 'index.html')
})
],
devServer: {
port: 9999,
open: true,
hot: true
}
}
清除生成的文件,安装 clean-webpack-plugin 插件
- 在命令行执行下面的代码:
npm install clean-webpack-plugin -D
- 修改 webpack.config.js 文件,内容修改如下:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
module: {
rules: [
// 解释 js 文件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// 解释 css 文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 解释图片
{
test: /\.(jpg|gif|jpeg|png)$/,
use: [
// 生成 base64位的图片
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
template: path.resolve(__dirname, 'index.html')
}),
// 每次清除生成的文件
new CleanWebpackPlugin()
],
devServer: {
port: 9999,
open: true,
hot: true
}
}
- 运行 npm run build,就会把之前的 dist 目录删除,并生成新的dist目录
配置字体的资源文件
- 安装相关的 file-loader,在命令行执行下面的代码:
npm install file-loader -D
- 修改 webpack.config.js 文件,内容修改如下:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: './src/index.js',
// 输出
output: {
// 路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: '[name].js'
},
module: {
rules: [
// 解释 js 文件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// 解释 css 文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
// 解释图片
{
test: /\.(jpg|gif|jpeg|png)$/,
use: [
// 生成 base64位的图片
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
// 解释字体的资源
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
template: path.resolve(__dirname, 'index.html')
}),
// 每次清除生成的文件
new CleanWebpackPlugin()
],
devServer: {
port: 9999,
open: true,
hot: true
}
}
在 src/assets 目录下新建一个 font 目录,把下载的字体放到这个目录
修改 src/assets/less/index.less 文件,内容如下:
@font-face {
font-family: 'douyinmeihaoti';
src: url('../font/douyinmeihaoti.otf') format('truetype');
}
body {
font-family: 'douyinmeihaoti';
background: #ccc;
}
区分开发环境和生产环境
- 在根目录新建一个 build 目录,在 build 新建三个文件,操作如下:
cd webpack-project
mkdir build
touch build/webpack.base.config.js
touch build/webpack.dev.config.js
touch build/webpack.prod.config.js
- 安装需要的包:操作如下:
npm install webpack-merge mini-css-extract-plugin -D
- webpack.base.config.js 文件的内容如下:
const path = require('path')
const webpack = require('webpack')
module.exports = {
// 入口
entry: path.resolve(__dirname, '../src/index.js'),
// 输出
output: {
// 路径
path: path.resolve(__dirname, '../dist'),
// 文件名
filename: '[name].js'
},
module: {
rules: [
// 解释 js 文件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
// 解释图片
{
test: /\.(jpg|gif|jpeg|png|svg)$/,
use: [
// 生成 base64位的图片
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
// 解释字体的资源
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: 'file-loader'
}
]
}
}
- webpack.dev.config.js 文件的内容如下:
const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BaseWebpackConfig = require('./webpack.base.config.js')
module.exports = merge(BaseWebpackConfig, {
mode: 'development',
module: {
rules: [
// 解释 css 文件
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
// 配置文件模板
template: path.resolve(__dirname, '../index.html')
})
// 每次清除生成的文件
// new CleanWebpackPlugin()
],
devServer: {
port: 9999,
open: true,
hot: true
}
})
- webpack.prod.config.js 文件的内容如下:
const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const BaseWebpackConfig = require('./webpack.base.config.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = merge(BaseWebpackConfig, {
mode: 'production',
module: {
rules: [
// 解释 css 文件
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
// 解释 less 文件
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/style.css'
}),
new HtmlWebpackPlugin({
// 配置输出文件名
filename: 'index.html',
// 配置文件模板
template: path.resolve(__dirname, '../index.html')
}),
// 每次清除生成的文件
new CleanWebpackPlugin()
]
})
- 修改 package.json 文件,修改 “build” 和 “dev” 两行的内容,内容修改如下:
"build": "webpack --progress --config build/webpack.prod.config.js",
"dev": "webpack server --config build/webpack.dev.config.js"
- 运行 npm run dev 和 npm run build,查看效果
【上一篇】Nginx 的常用配置
【下一篇】canvas的基础知识
相关文章