前言
本文我们将会从环境搭建、服务器配置、常用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等框架进行开发的。