本文详细介绍Webpack的环境搭建、服务器配置、Loader、插件使用及生产打包流程，助力开发者快速上手。
前言
本文我们将会从环境搭建、服务器配置、常用Loader、常用插件和生产打包等方面，一步步详细的介绍Webpack工具的使用，目标是希望可以让大家快速入门和应用。
关于Webpack官网介绍是这样的：它是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
1、环境搭建
1.1、目录结构
在介绍具体操作步骤之前，我们先看一下本文示例的最终效果，src是源码文件目录，dist是打包文件目录，其它是相关的配置文件，后面都会陆续介绍。
1.2、安装Node
去node中文网下载对应版本进行安装，然后在dos窗口中分别使用node -v和npm -v命令查看版本，如果正常输出版本则说明安装成功。
这里我们先执行命令npm install -g cnpm --regisrty=https://registry.npm.taobao.org指定淘宝镜像，后续使用cnpm安装其它依赖时效率更高。
1.3、安装全局依赖
安装两个全局依赖，执行命令cnpm install -g webpack与cnpm install -g webpack-cli。
1.4、项目初始化
在webpack目录下，执行命令cnpm init -y，生成package.json文件，该文件用于管理项目的依赖信息和描述信息。
1.5、安装项目依赖
在webpack目录下，安装两个项目依赖，执行命令cnpm install --save-dev webpack与cnpm install --save-dev webpack-cli。
1.6、创建src与dist
在webpack项目下分别创建src目录和dist目录，src中存放源码文件，dist中存放打包编译后的文件。
1.7、编写测试代码
在src下创建app.js和data.js文件，编写测试代码，并输出Test webpack文本。
app.js
var div = require("./data");
document.getElementsByTagName("body")[0].appendChild(div());
data.js
module.exports = function(){
var div = document.createElement("div");
div.textContent = "test webpack";
return div;
};
1.8、创建webpack.config.js
在webpack中创建webpack.config.js配置文件，entry表示打包入口文件，output指定输出目录和文件名称。这里意思是将src目录下的app.js等文件打包为bundle.js文件，并输出到dist中。
var path = require("path");
module.exports = {
entry:"./src/app.js", //入口文件
output:{
path:path.resolve(__dirname,"dist"), //__dirname表示当前路径
filename:"bundle.js"
}
};
1.9、执行webpack命令打包
在webpack目录下执行命令webpack，进行打包，可以看到打包成功，在dist目录下生成了bundle.js文件。
但是控制台也输出了警告信息The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.，意思是打包没有指定开发模式还是生产模式，如果是开发模式，生成的bundle.js文件不会做压缩处理，支持调试，文件体积较大；生产模式则会压缩，且体积较小。
1.10、警告信息处理的两种方式
方式一：在webpack.config.js中指定mode为development（开发模式）或production（生产模式）。
var path = require("path");
module.exports = {
entry:"./src/app.js", //入口文件
output:{
path:path.resolve(__dirname,"dist"), //__dirname表示当前路径
filename:"bundle.js"
},
mode: 'production' // 设置mode
};
方式二：在package.json中增加"dev": "webpack --mode development"和"build": "webpack --mode production"命令，那么打包时，如果选择开发模式则使用npm run dev，选择生产模式使用npm run build。
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
1.11、效果查看
在dist目录下创建index.html模板，并引入bundle.js文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test webpack</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
在浏览器中访问index.html，可以看到bundle.js中的脚本内容渲染成功，至此，说明我们的webpack环境搭建成功了。
2、服务器配置
在实际开发过程中，我们通过会使用服务器模式，这样方便且效率更高。
2.1、安装依赖
执行命令cnpm install -g webpack-dev-server与npm install --save-dev webpack-dev-server
2.2、启动测试
执行webpack-dev-server命令（默认启用8080端口）
在浏览器中访问http://localhost:8080/地址，可以看到webpack项目根目录，说明服务是可用的。但实际上我们希望访问的资源在dist文件夹中，其它的资源并不需要浏览访问。
2.3、指定默认访问dist/路径
在webpack.config.js中增加如下配置，即可直接映射到dist目录中
devServer:{
contentBase:"./dist"
}
再次访问效果
2.4、修改启动命令
之前我们在package.json中指定了开发模式，所以可以通过npm run xxx的方式打包。这里我们将"dev": "webpack --mode development"修改为"dev": "webpack-dev-server --mode development"，即可执行npm run dev命令启动服务。
2.5、热更新模式
在开启热更新前，每次修改代码后，我们需要手动刷新浏览器才能生效。启用热更新后，页面内容则会自动更新，提高开发效率。
具体做法：在webpack.config.js文件的devServer{}中，将hot属性指定为true，重启服务即可
devServer:{
contentBase:"./dist",
hot:true
}
3、常用Loader
3.1、babel-loader引入
安装依赖：执行命令cnpm install --save-dev babel-loader @babel/core @babel/preset-env
增加配置：在webpack.config.js中增加如下规则配置
// loaders
module: {
rules: [
// es6 -> es5
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
3.2、CSS处理
安装依赖：执行命令cnpm install --save-dev style-loader css-loader
增加配置：在webpack.config.js的module中增加如下配置规则
{
test:/\.css$/,
use:['style-loader','css-loader']
}
创建文件：在src目录下创建css文件夹，在创建app.css文件，并编写一个字体设置样式
*{
font-size:50px;
color: #ff0000;
}
文件引入：在app.js中使用import引入app.css文件
import './css/app.css';
var div = require("./data");
document.getElementsByTagName("body")[0].appendChild(div());
效果查看：重启服务访问
3.3、Image处理
安装依赖：执行命令cnpm install --save-dev file-loader
增加配置：在webpack.config.js的module中增加如下配置规则
{
test:/\.(png|svg|jpg|gif)$/,
use:'file-loader'
}
创建文件：在src目录下创建images文件夹，然后存入一张test.jpg图片
文件引入：在app.js中使用import引入图片文件，并编写渲染测试代码
import test from './images/test.jpg';
//图片加载
var testImage = new Image();
testImage.src = test;
document.getElementsByTagName("body")[0].appendChild(testImage);
效果查看：重启服务访问
3.4、字体图标
安装依赖：执行命令cnpm install --save-dev url-loader
增加配置：在webpack.config.js的module中增加如下配置规则
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use:'file-loader'
}
创建文件：在css目录下创建font文件夹，并引入字体样式
文件引入：在app.js中使用import引入iconfont.css文件，并编写渲染测试代码
import './css/font/iconfont.css'
//字体图标加载
var font = document.createElement("span");
font.className ='iconfont icon--plus1';
document.getElementsByTagName("body")[0].appendChild(font);
效果查看：重启服务查看
3.5、Less处理
安装依赖：执行命令cnpm install --save-dev less less-loader
增加配置：在webpack.config.js的module中增加如下配置规则，它的使用方法和css一样
{
test:/\.less$/,
use: ['style-loader', 'css-loader', "less-loader"]
}
4、常用插件
4.1、自动打开浏览器插件
安装依赖：执行命令cnpm install -D open-browser-webpack-plugin
增加配置：在webpack.config.js中增加如下配置
var openBrowser = require("open-browser-webpack-plugin");
module.exports = {}中增加，再次启动服务时，会自动打开浏览器
plugins:[
new openBrowser({
url:"http://localhost:8080"
})
]
4.2、HTML模板插件
安装依赖：执行命令cnpm install -D html-webpack-plugin
增加配置：在webpack.config.js的plugins中增加如下配置
var htmlWebpackPlugin = require("html-webpack-plugin");
new htmlWebpackPlugin({
template: "./src/index.temp.html"
})
创建文件：在src目录下创建index.temp.html，
删除目录：删除dist目录
效果查看：重启服务，在没有dist目录情况下，同样可以正常加载页面。原因是使用该插件后，我们将进入开发中状态，也就是说本地的服务器中增加可访问的环境，项目中不需要自己创建dist目录了。
5、生产打包
执行命令：在webpack目录下执行npm run build
生成文件：执行成功后，会自动生成dist目录及对应资源文件
发布生产：将dist目录发布到Linux环境进行部署
后记
以上就是Webpack从环境搭建到打包上线的主体操作流程，当然，在实际项目中，我肯定是结合Vue、React等框架进行开发的。
扫一扫
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
