本文详细介绍Webpack的基本用法，包括全局及本地安装方式、JS模块打包、CSS/Images资源处理、实时重新加载、Babel转换、Vue单文件组件打包及模块热替换等核心功能。
根据某课程文件和webpack官网整理，仅作学习参考，因无网络链接，暂未设置链接地址，如有侵权，请联系删除。
前言
不推荐 全局安装 webpack。全局安装的 webpack ，在打包项目的时候，使用的是安装在自己电脑上的webpack，如果项目到了另一个人的电脑上，他可能安装的是旧版本 webpack。那么就可能涉及兼容性的问题。而且如果他没有在全局安装 webpack 则就无法打包。 所以，为了解决以上的问题，官方推荐本地安装 webpack，就是将 webpack 安装到对应项目中。这样项目到哪里，webpack 就跟到哪里（webpack 打包工具随着项目走）。
一、webpack全局使用
全局安装
安装最新版本
npm install --global webpack
或者 安装特定版本
npm install --global webpack@<version>
如果上面安装的是
webpack v4+
版本
,
还需要安装
CLI ,
才能使用
webpack
命令行
npm install --global webpack-cli打包 JS 模块
1、命令执行目录切换到源文件所在目录，
2、把源码存储到 src 目录中 , 把打包后的结果存储到 dist 目录中(在打包时，指定 dist 目录后会自动创建)
d:\demo>webpack ./src/main.js -o ./dist/bundle.js
3、引用打包后的文件
打包配置文件 webpack.config.js
每当修改js文件内容后，都要 webpack 重新打包，打包时要指定入口和出口比较麻烦，可通过配置解决
读取当前目录下 src 文件夹中的 main.js（入口文件）内容，把对应的 js 文件打包，打包后的 bundle.js
文件放入当前目录的 dist 文件夹下。
1.
创建
webpack.config.js
配置文件
// 引用 Node.js 中的 path 模块，处理文件路径的小工具
const path = require("path");
// 1. 导出一个webpack具有特殊属性配置的对象
module.exports = {
// 入口
entry: './src/main.js', // 入口模块文件路径
// 出口是对象
output: { // path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D:\StudentProject\WebStudy\webpack-demo2
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名
}
}2. 执行打包命令
webpack3. 解决打包时出现 黄色警告：
通过
mode
选项指定模式配置，告诉
webpack
使用对应环境的预设插件，
参考：
https://webpack.js.org/confifiguration/mode/
const path = require("path");
module.exports = {
// 指定模式配置,取值： none（什么也没有）, development or production(默认的)
// 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的
mode: 'none',
entry: './src/main.js', // 入口模块文件路径
output: {
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名
}
}
重新打包，发现没有黄色警告了。
4.
测试访问
index.html
二、本地安装（推荐）
本地安装的时候，建议把
webpack
安装到
devDependencies
开发依赖
(
--
save
-
dev
)
中，因为
webpack
只是一个
打包工具，项目如果需要上线，上线的是打包的结果，而不是这个工具。
所以我们为了区分生产环境和开发环境依赖，通过
--
save
（生产环境）和
--save-dev
（开发环境）来区分。
本地安装
卸载全局
npm uninstall -g webpack
npm uninstall -g webpack-cli
安装最新版本
npm install --save-dev webpack
安装特定版本
npm install --save-dev webpack@<version>
安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行
npm install --save-dev webpack-cli
案例：
1. 进入到demo
cd d:\demo
2. 初始化项目 `-y` 是采用默认配置
npm init -y
3. 安装 v4.35.2 ，不要少了 v
npm i -D webpack@v4.35.2
4. 安装 CLI
npm i -D webpack-cli@3.3.6
5.在本地安装的 webpack ，要通过在项目文件夹下 package.json 文件中的 scripts 配置命令映射
"scripts": {
"show": "webpack -v",
"start": "node ./src/main.js"，
"build": "webpack"
},
6.再通过 npm run 命令别名 执行对应命令
查看 webpack 版本号：npm run show
运行 main.js 模块: npm run start
7. 打包构建
npm run build
三、打包 CSS/Images 等资源
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，需要结合插件来使用，这些插件在 Webpack 中被称为 Loader （加载器） 来进行转换。 Loader 可以理解为是模块和资源的转换器，它本身是一个函数，参数接受的是源文件， 返回值是转换后的结果。 这样，我们就可以通过 require 或 import 来加载任何类型的模块或文件，比如 CSS、 图片。
1、打包 CSS 资源
1. 安装 style-loader 和 css-loader 依赖
css
-
loader
是 将
css
装载到
javascript
；style
-
loader
是让
javascript
认识
css
。
npm install --save-dev style-loader css-loader
2.
修改
webpack.confifig.js
const path = require("path");
module.exports = {
mode: 'none',
entry: './src/main.js', // 入口模块文件路径
output: {
// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名
},
module: { // 模块
rules: [ // 规则
{
test: /\.css$/, // 正则表达式，匹配 .css 文件资源
use: [ // 使用的 Loader ,注意顺序不能错
'style-loader',
'css-loader'
]
}
]
}
}
3.
在
src
文件夹创建
css
文件夹
, css
文件夹下创建
style.css
body {
background: red
}4. 在 main.js 只引入 style.css
// 模块方式导入 css , 最终会打包成js，打包在 bundle.js 中
import './css/style.css'5. 重新打包编译
npm run build打包后，查看 bundle.js ，发现已经将 css 样式以 js 方式引入了 。
6.
访问
index.html ,
查看样式
7.
原理：
将
CSS
文件内容转成一个
JavaScript
模块，然后在运行
JavaScript
时，会
将样式动态使用
<sytle>
标签作用在页面
<head>
标签下。
1、打包 Images 资源
1. 安装 fifile-loader 依赖
npm install --save-dev file-load2.使用html-webpack-plugin 插件 ：解决文件路径问题
将
index.html
打包到
bundle.js
所在目录中，同时也会在
index.html
中自动的
<script>
引入
bundle.js
安装插件
npm install --save-dev html-webpack-plugin3. 修改 webpack.confifig.js
const path = require("path");
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'none',
entry: './src/main.js', // 入口模块文件路径
output: {
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名 },
module: { // 模块
rules: [ // 规则
{
test: /\.css$/, // 正则表达式，匹配 .css 文件资源
use: [ // 使用的 Loader ,注意顺序不能错
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
}
3. 修改index.html,
模拟下
vue
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 使用了HtmlWebpackPlugin 插件会自动引入bundle.js中 -->
<!-- <script src="./dist/bundle.js"></script> -->
<div id="app">
</div>
</body>4.修改 style.css
body{
background: red;
background-image: url(./1.jpg)
}5.重新打包
npm run build
6.
运行
dist/index.html
文件,而非src中index文件
四、实时重新加载
webpack
提供的工具：
webpack
-
dev
-
server
，允许在运行时更新所有类型的模块后，而无需手动打
包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。
1.
安装依赖
npm install --save-dev webpack-dev-server
2.
修改
webpack.config.js
配置
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'none',
entry: './src/main.js', // 入口模块文件路径
output: {
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名
},
// 实时重新加载 d
evServer: {
contentBase: './dist'
}
}
3.
修改
package.json
的
scripts
--
open
选项打包成功，自动打开浏览器
"scripts": {
"show": "webpack -v",
"build": "webpack",
"watch-build": "webpack --watch",
"dev": "webpack-dev-server --open"
},4. 打包
npm run dev
5.
修改 style.css 测试效果
五、babel-loader使用
1、安装
Bable
npm install -D babel-loader @babel/core @babel/preset-env
2、配置
webapck.confifig.js
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, // 排除的目录
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] // 内置好的转译工具
}
}
}
]
}
3、npm run build
打包
六 Vue-Loader 打包Vue单文件组件
1. 安装 vue-loader 和 vue-template-compiler 依赖
npm install -D vue-loader vue-template-compiler2. 修改 webpack.config.js 配置
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
3.
在
main.js
中导入
App.vue
import App from './App.vue'
4.
打包
npm run build六、模块热替换（HMR）
局部无刷新的情况下就可以更新。只能更新组件，更新 js 是无法热替换的。
1、配置
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
module.exports = {
mode: 'none',
entry: './src/main.js', // 入口模块文件路径
output: {
path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
filename: 'bundle.js' // 打包的结果文件名
},
// 实时重新加载
devServer: {
contentBase: './dist' ,
hot: true
},
plugins: [
// 模块热替换
new webpack.HotModuleReplacementPlugin(),
// 引入Vue插件
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
],
module: { //模块
rules: [ // 规则
{
test: /\.css$/, // 正则表达式，匹配 .css 文件资源
use: [ // 使用的 Loader ,注意顺序不能错
'style-loader', 'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader' ]
},
{
test: /\.vue$/,
use: ['vue-loader' ]
}
]
}
}2、打包构建 npm run dev
若报错：
internal/modules/cjs/loader.js
:
584
throw err;
^
Error
:
Cannot find module 'uuid/v4'
执行命令，解决重新安装
webpack-dev-server
： npm install --save-dev webpack-dev-serv
er
再进行打包
npm run dev
3.
访问
dist/index.html ,
然后对
.vue
单文件组件更新，会局部热替换。
扫一扫
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
