从零开始的Webpack4教程

35次阅读

共计 7895 个字符,预计需要花费 20 分钟才能阅读完成。

1、了解 Webpack 相关

什么是 webpack

Webpack 是一个模块打包器(bundler)。
在 Webpack 看来, 前端的所有资源文件 (js/json/css/img/less/…) 都会作为模块处理
它将根据模块的依赖关系进行静态分析,生成对应的静态资源

五个核心概念

Entry:入口起点 (entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
Output:output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
Loader:loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只能解析 JavaScript)。
Plugins:插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
Mode:模式,有生产模式 production 和开发模式 development

理解 Loader

Webpack 本身只能加载 JS/JSON 模块,如果要加载其他类型的文件(模块),就需要使用对应的 loader 进行转换 / 加载
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
它本身是一个函数,接受源文件作为参数,返回转换的结果
loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader。

理解 Plugins

插件可以完成一些 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

配置文件(默认)
webpack.config.js : 是一个 node 模块,返回一个 json 格式的配置信息对象

2、开启项目

初始化项目:

生成 package.json 文件
{
“name”: “webpack_test”,
“version”: “1.0.0”
}

安装 webpack

npm install webpack webpack-cli -g // 全局安装
npm install webpack webpack-cli -D // 本地安装

3、编译打包应用

创建 js 文件

src/js/app.js
src/js/module1.js
src/js/module2.js
src/js/module3.js

创建 json 文件
src/json/data.json

创建主页面:
src/index.html

运行指令

开发配置指令:webpack src/js/app.js -o dist/js/app.js –mode=development
功能: webpack 能够编译打包 js 和 json 文件,并且能将 es6 的模块化语法转换成浏览器能识别的语法

生产配置指令:webpack src/js/app.js -o dist/js/app.js –mode=production
功能: 在开发配置功能上加上一个压缩代码

结论:

webpack 能够编译打包 js 和 json 文件
能将 es6 的模块化语法转换成浏览器能识别的语法
能压缩代码

缺点:

不能编译打包 css、img 等文件
不能将 js 的 es6 基本语法转化为 es5 以下语法

改善:使用 webpack 配置文件解决,自定义功能

4、使用 webpack 配置文件

目的:在项目根目录定义配置文件,通过自定义配置文件,还原以上功能
文件名称:webpack.config.js

文件内容:
const {resolve} = require(‘path’); //node 内置核心模块,用来设置路径。
module.exports = {
entry: ‘./src/js/app.js’, // 入口文件
output: {// 输出配置
filename: ‘./js/bundle.js’, // 输出文件名
path: resolve(__dirname, ‘dist’) // 输出文件路径配置
},
mode: ‘development’ // 开发环境(二选一)
mode: ‘production’ // 生产环境(二选一)
};

运行指令:webpack

5、js 语法检查

安装 loader
npm install eslint-loader eslint –save-dev

配置 loader
module: {
rules: [
{
test: /\.js$/, // 只检测 js 文件
exclude: /node_modules/, // 排除 node_modules 文件夹
enforce: “pre”, // 提前加载使用
use: {// 使用 eslint-loader 解析
loader: “eslint-loader”
}
}
]
}

修改 package.json(需要删除注释才能生效)
“eslintConfig”: {//eslint 配置
“parserOptions”: {
“ecmaVersion”: 8, // es8
“sourceType”: “module”, // ECMAScript 模块
}
}

运行指令:webpack

6、js 语法转换

安装 loader
npm install babel-loader @babel/core @babel/preset-env –save-dev

配置 loader
module: {
rules: [
{
oneOf: [// 数组中的配置只有一个能够生效, 后面的配置都会放在当前数组中
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
options: {
presets: [‘@babel/preset-env’]
}
}
}
]
}
]
}

运行指令:webpack

7、打包 less 资源

创建 less 文件

src/less/test1.less
src/less/test2.less

入口 app.js 文件
引入 less 资源

安装 loader
npm install css-loader style-loader less-loader less –save-dev

配置 loader
oneOf: [
{
test: /\.less$/,
use: [{
loader: “style-loader”
}, {
loader: “css-loader”
}, {
loader: “less-loader”
}]
}
]

运行指令:webpack
在 index.html 中引入打包生成的 dist/js/bundle.js 文件, 观察效果

8、打包样式文件中的图片资源

添加 2 张图片:

小图, 小于 8kb: src/images/1.png
大图, 大于 8kb: src/images/2.jpg

在 less 文件中通过背景图的方式引入图片

安装 loader

npm install file-loader url-loader –save-dev
补充:url-loader 是对象 file-loader 的上层封装,使用时需配合 file-loader 使用。

配置 loader
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: ‘url-loader’,
options: {
outputPath: ‘images/’, // 在 output 基础上,修改输出图片文件的位置
publicPath: ‘../dist/images/’, // 修改背景图引入 url 的路径
limit: 8 * 1024, // 8kb 大小以下的图片文件都用 base64 处理
name: ‘[hash:8].[ext]’ // hash 值为 7 位,ext 自动补全文件扩展名
}
}
]
}

运行指令:webpack
在 index.html 中引入打包生成的 dist/js/bundle.js 文件, 观察效果

9、打包 html 文件

添加 html 文件

src/index.html
注意不要在 html 中引入任何 css 和 js 文件

安装插件 Plugins
npm install clean-webpack-plugin –save-dev

在 webpack.config.js 中引入插件(插件都需要手动引入,而 loader 会自动加载)
const CleanWebpackPlugin = require(‘clean-webpack-plugin’)

配置插件 Plugins
plugins: [
new HtmlWebpackPlugin({
template: ‘./src/index.html’
}),
]

运行指令:webpack

10、打包 html 中图片资源

添加图片
在 src/index.html 添加两个 img 标签

安装 loader
npm install html-loader –save-dev

修改 entry
entry: [‘./src/js/app.js’, ‘./src/index.html’]

配置 loader
{
test: /\.(html)$/,
use: {
loader: ‘html-loader’
}
}

运行指令:webpack

11、打包其他资源

添加字体文件

src/media/iconfont.eot
src/media/iconfont.svg
src/media/iconfont.ttf
src/media/iconfont.woff
src/media/iconfont.woff2

修改样式
@font-face {
font-family: ‘iconfont’;
src: url(‘../media/iconfont.eot’);
src: url(‘../media/iconfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../media/iconfont.woff2’) format(‘woff2’),
url(‘../media/iconfont.woff’) format(‘woff’),
url(‘../media/iconfont.ttf’) format(‘truetype’),
url(‘../media/iconfont.svg#iconfont’) format(‘svg’);
}

.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

修改 html,添加字体

配置 loader
{
loader: ‘file-loader’,
exclude: [/\.js$/, /\.html$/, /\.json$/],
options: {
outputPath: ‘media/’,
publicPath: ‘../dist/media/’,
name: ‘[hash:8].[ext]’,
},
}

运行指令:webpack

12、自动编译打包运行

安装 loader
npm install webpack-dev-server –save-dev

引入 webpack
const webpack = require(‘webpack’);

修改 webpack 配置对象(注意不是 loader 中)
devtool: ‘inline-source-map’, // 将编译后的代码映射回原始源代码,更容易地追踪错误和警告
devServer: {
contentBase: ‘./dist’, // 项目根路径
hot: true, // 开启热模替换功能
open: true // 自动打开浏览器
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]

修改 loader 部分配置

因为构建工具以 dist 为根目录,不用再找 dist 了

publicPath: ‘../dist/images/’ –> publicPath: ‘images/’

publicPath: ‘../dist/media/’ –> publicPath: ‘media/’

修改 package.json 中 scripts 指令

“start”: “webpack-dev-server”,
“dev”: “webpack-dev-server”

运行指令:npm start / npm run dev

以上就是 webpack 开发环境的配置,可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。
13、准备生产环境

创建文件夹 config,将 webpack.config.js 复制两份

webpack.dev.js
webpack.prod.js

修改 webpack.prod.js 配置,删除 webpack-dev-server 配置
module.exports = {
output: {
filename: ‘js/[name].[hash:8].js’, // 添加了 hash 值, 实现静态资源的长期缓存
publicPath: ‘/’ // 所有输出资源公共路径
},
module: {//loader 其他没有变化,只放了变化部分,只有需要修改路径部分改了
rules: [
{
oneOf: [
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8 * 1024, // 8kb 大小以下的图片文件都用 base64 处理
name: ‘images/[name].[hash:8].[ext]’
}
}
]
},
{
loader: ‘file-loader’,
exclude: [/\.js$/, /\.html$/, /\.json$/],
options: {
name: ‘media/[name].[hash:8].[ext]’,
},
}
]
}
]
},
mode: ‘production’, // 修改为生产环境
}

修改 package.json 的指令

“start”: “webpack-dev-server –config ./config/webpack.dev.js”
“dev”: “webpack-dev-server –config ./config/webpack.dev.js”
“build”: “webpack –config ./config/webpack.prod.js”

开发环境指令

npm start
npm run dev

生产环境指令

npm run build

注意: 生产环境代码需要部署到服务器上才能运行

npm i serve -g
serve -s dist

14、清除打包文件目录

安装插件
npm install clean-webpack-plugin –save-dev

引入插件
const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

配置插件
new CleanWebpackPlugin()

运行指令:npm run build

15、提取 css 成单独文件

安装插件
npm install mini-css-extract-plugin –save-dev

引入插件
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

配置 loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
‘less-loader’,
]
}

配置插件
new MiniCssExtractPlugin({
filename: “css/[name].[hash:8].css”,
chunkFilename: “css/[id].[hash:8].css”
})

运行指令

npm run build
serve -s dist

16、添加 css 兼容

安装 loader
npm install postcss-loader autoprefixer –save-dev

配置 loader
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
‘css-loader’,
‘postcss-loader’,
‘less-loader’,
]
}

在项目根目录添加 postcss 配置文件:postcss.config.js
module.exports = {
“plugins”: {
“autoprefixer”: {
“browsers”: [
“ie >= 8”,
“ff >= 30”,
“chrome >= 34”,
“safari >= 8”,
“opera >= 23”
]
}
}
}

运行指令:

npm run build
serve -s dist

17、压缩 css

安装插件
npm install optimize-css-assets-webpack-plugin –save-dev

引入插件
const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);

配置插件
new OptimizeCssAssetsPlugin({
cssProcessorPluginOptions: {
preset: [‘default’, { discardComments: { removeAll: true} }],
},
})

运行指令:

npm run build
serve -s dist

18、图片压缩

安装 loader
npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin –save-dev

配置 loader
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8 * 1024, // 8kb 大小以下的图片文件都用 base64 处理
name: ‘images/[name].[hash:8].[ext]’
}
},
{
loader: ‘img-loader’,
options: {
plugins: [
require(‘imagemin-gifsicle’)({
interlaced: false
}),
require(‘imagemin-mozjpeg’)({
progressive: true,
arithmetic: false
}),
require(‘imagemin-pngquant’)({
floyd: 0.5,
speed: 2
}),
require(‘imagemin-svgo’)({
plugins: [
{removeTitle: true},
{convertPathData: false}
]
})
]
}
}
]
}

运行指令:

npm run build
serve -s dist

19、压缩 html

修改插件配置
new HtmlWebpackPlugin({
template: ‘./src/index.html’,
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}
})

运行指令:

npm run build
serve -s dist

以上就是 webpack 生产环境的配置,可以生成打包后的文件。到这里基本配置已经告一段落了,所有配置我已经放在 仓库 中了。后期会考虑出一期优化配置,将 webpack 优化到底~

正文完
 0