为了学习和理解webpack解决了前端的哪些痛点,还是有必要从零开始自己搭建一个简单的开发环境,
此教程适合刚接触webpack的新手学习。
1. 安装node依赖环境
2. 初始化项目
3. 安装webpack
4. 创建webpack.config.js
5. 配置webpack.config.js
6. 完整项目开发环境配置
1. 安装node依赖环境
首先webpack基于node环境运行,所以事先请自行安装node,网上教程比较多,这里不再累赘,安装完可通过以下命令检查是否已经正常安装:
$ node -v
v12.13.1
$ npm -v
6.12.1
2. 初始化项目
新建一个项目根目录,然后CD到根目录下,通过以下命令快速初始化项目:
npm init
根据需要配置或者直接一路默认Enter下来即可:
Press ^C at any time to quit.
package name: (development)
version: (1.0.0)
description: Vue环境搭建
entry point: (webpack.config.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\wamp64\www\web\Vue\development\package.json:
{
"name": "development",
"version": "1.0.0",
"description": "Vue环境搭建",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
这样,就在项目根路径下生成了一个package.json,用于管理项目信息及安装的第三方依赖模块。
3. 安装webpack
这里需要注意一点,webpack4需要安装webpack cli,跟往常不一样,大家安装好webpack4以后并不能直接使用,会提示你安装webpack cli。
如果想全局使用webpack的命令,可以使用npm install webpack-cli -g 安装。
Tips:这里建议在项目中安装 webpack-cli 并且使用 --save-dev 或者 -D 的配置将 webpack-cli 放到开发依赖中。
npm install webpack webpack-cli -D
4. 创建webpack.config.js
对于初学者来说,建议手动创建webpack.config.js文件,然后自己一步步写配置,以加深印象。
首先,在项目根目录,新建webpack.config.js,可以先写出大体结构:
module.exports = {
// 开发模式,webpack会根据该模式使用相应的编译配置
mode: 'development',
// 打包入口
entry: '',
// 打包后资源输出路径
output: {},
// 依赖模块,通过设置对应loader去执行一些webpack理解不了的语法资源
// 如jsx转化为js,less转化为css等,相当于翻译官
module: {},
// 依赖插件,处理一些打包压缩、资源优化等任务,比loader功能更强大
plugins: []
}
根据项目结构,开始配置,如我的项目结构如下图:
5. 配置webpack.config.js
5.1 配置项目打包入口和打包后资源输出路径
const { resolve } = require("path");
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {
filename: './bundle.js',
path: resolve(__dirname, './build')
},
module: {},
plugins: []
}
5.2 配置一些loader规则
- 5.2.1 配置 ES6/7/8 转 ES5代码
配置之前,先要安装相关依赖
npm install babel-loader @babel/core @babel/preset-env
babel-loader是将ES6等高级语法转换为能让浏览器能够解析的低级语法
@babel/core是babel的核心模块,编译器。提供转换的API
@babel/preset-env 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5
修改webpack.config.js配置
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
]
}
]
}
修改package.json文件,在scripts属性中添加一个build属性,用于运行编译命令
"scripts": {
"build": "webpack --config ./webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
main.js和./src/index.js文件分别添加如下代码:
// ./src/index.js
let test = str => {
return str.split('').reverse().join('')
}
module.exports = {
test
}
// main.js
import { test } from './js/index.js'
console.log(test)
console.log(test('Hello word!'))
然后测试打包
npm run build
新建的index.html静态文件,将打包生成的bundle.js文件引入,浏览器打开index.html,在开发者控制台查看输出,即可看到 ES6代码被转成了ES5代码了:
ƒ test(str) {
return str.split('').reverse().join('');
}
!drow olleH
- 5.2.1.1 ES6/7/8 Api 转ES5
注意:babel-loader只会将 ES6/7/8等高级语法转换为ES5语法,但是对新api并不会转换。比如Promise、Iterator、Set、Proxy、Symbol等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。此时,我们必须使用babel-polyfill对一些不支持新语法的浏览器提供兼容性实现。
安装:
npm install @babel/polyfill -S
使用,可以直接在打包入口文件main.js中引入:
import '@babel/polyfill'
打包测试,你会发现bundle.js文件体积增大了好多,原因就是@babel/polyfill为了兼容,将所有兼容性代码全部引入,这就导致体积很大,所以我们要按需加载,减少打包编译后的体积。
- 5.2.1.2 按需引入polyfill
安装相关依赖
npm install core-js -S
安装完成需要修改webpack.config.js配置:
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
{
//按需加载
useBuiltIns: 'usage',
//指定core-js版本
corejs: {
version: 3
},
//指定到最低浏览器版本的兼容性
targets: {
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
}
}
]
}
]
}
配置了按需引入 polyfill 后,babel会自动导入相关的polyfill,这样能大大减少了打包编译后的体积。
- 5.2.2 配置样式预处理器转成CSS
以下就以less预处理器用法为例,其余两种类似:
npm install less less-loader css-loader style-loader -D
css-loader主要的作用是解析css文件, 像@import等动态语法
style-loader主要的作用是解析的css文件渲染到html的style标签内
stylus、less、sass是CSS的常见预处理器,可根据需要安装一种或多种
stylus-loader、less-loader、sass-loader主要是将其对应的语法转换成css语法,可根据需要安装一种或多种
安装完成,修改webpack.config.js配置:
注意:使用loader顺序是要从下到上(以下是从右到左)
1、首先使用less-loader处理.less文件转化为webpack认识的CSS样式;
2、然后通过css-loader解析main.js文件中的import语法,分析出各个css文件之间的关系,把各个css文件合并成一段css;
3、最后经过style-loader的作用,将css-loader生成的css代码挂载到页面的head部分。
module: {
rules: [
{...},
{ //处理less资源
test: /\.less/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
在项目src目录中的index.less文件添加以下样式,并在打包入口main.js文件中引入
@color: red;
.box {
width: 200px;
height: 200px;
color: @color
}
执行打包编译,在浏览器中刷新index.html文件,可以看到上面的样式已添加到head标签中,说明编译转化成功。
- 对于CSS3 的许多特性来说,需要添加各种浏览器兼容前缀,开发过程中自己手动加太过麻烦,postcss 帮你自动添加各种浏览器前缀
npm install postcss-loader autoprefixer -D
postcss-loader autoprefixer 处理浏览器兼容,自动为CSS3的某些属性添加前缀
修改webpack.config.js配置
module: {
rules: [
{...},
{
test: /\.less/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
//必须设置支持的浏览器才会自动添加添加浏览器兼容
overrideBrowserslist: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader'
}
]
}
]
}
npm install file-loader url-loader -D
file-loader可以用来帮助webpack打包处理一系列的图片文件;比如:.png 、 .jpg 、.jepg等格式的图片。
打包的图片会给每张图片都生成一个随机的hash值作为图片的名字
url-loader封装了file-loader,它的工作原理:
1、文件大小小于limit参数,url-loader将会把文件转为Base64;
2、文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。
修改webpack.config.js配置
module: {
rules: [
{...},
{...},
{
test: /\.(jpg|jepg|png|gif|svg)$/,
use: [{
loader: 'url-loader',
options: {
// 当图片大于8k时,交给file-loader处理,否则url-loader会把图片src转成base64编码
limit: 1024 * 8,
name: '[name].[hash:10].[ext]',
outputPath: 'images',
// 新版file-loader使用了ES Module模块化方式,将esModule配置为false就可以解决html页面中图片解析地址不正确问题
esModule: false
}
}]
}
]
}
- 5.2.4 解析html静态文件中图片资源
5.2.3中只能解析样式文件中的字体、图片资源,但是对html静态文件中图片资源无效,所以需要安装html-withimg-loader:
npm install html-withimg-loader -D
html中直接使用img标签src加载图片的话,因为没有被依赖,图片将不会被打包。
这个loader解决这个问题,图片会被打包,而且路径也处理妥当。
修改webpack.config.js配置
module: {
rules: [
{...},
{...},
{...},
{
test: /\.(html|htm)$/,
use: [{
loader: 'html-withimg-loader',
options: {
outputPath: 'images'
}
}]
},
]
}
- 5.2.5 解析字体资源
修改webpack.config.js配置
module: {
rules: [
{...},
{...},
{...},
{...},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
]
}
目前绝大多数的vue项目里核心业务代码都是.vue文件结尾的,但浏览器不支持对.vue文件的解析,故需webpack将.vue文件转换为浏览器能识别的js文件。
安装相关依赖
npm install vue-loader vue-template-compiler cache-loader thread-loader -D
npm install vue -S
vue-loader 作用解析.vue文件
vue-template-compiler 作用编译模板
cache-loader 作用缓存loader编译的结果
thread-loader 作用使用 worker 池来运行loader,每个 worker 都是一个 node.js 进程
vue 一个用于构建用户界面渐进式的MVVM框架
修改webpack.config.js配置
const { resolve } = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {...},
module: {
rules: [
{...},
{...},
{...},
{...},
{...},
{
test: /\.vue$/,
use: [{
loader: 'cache-loader' // 缓存loader编译的结果
},
{
loader: 'thread-loader' // 作用使用 worker 池来运行loader,每个 worker 都是一个 node.js 进程
},
{
loader: 'vue-loader', // 解析.vue文件
options: {
compilerOptions: { // 编译模板
preserveWhitespace: false
}
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, './src/index.html')
}),
new VueLoaderPlugin()
]
}
5.3 配置html文件自动引入打包后的js文件
可通过html-webpack-plugin插件来创建html文件。
安装相关依赖
npm install html-webpack-plugin -D
html-webpack-plugin主要有两个作用:
1、为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题;
2、以输入模板为基础,生成创建自动引入打包后资源链接的html入口文件。
修改webpack.config.js配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {...},
module: {...},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, './src/index.html')
})
]
}
5.4 配置重新打包后删除上次打包的文件
安装相关依赖
npm install clean-webpack-plugin -D
clean-webpack-plugin是删除webpack打包后的文件夹以及文件。
修改webpack.config.js配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {...},
module: {...},
plugins: [
new HtmlWebpackPlugin({
template: resolve(__dirname, './src/index.html')
}),
new CleanWebpackPlugin()
]
}
5.5 配置 devServer 热更新功能
每次修改完要手动运行打包编译很麻烦,这就需要启用热更新功能,修改完自动打包编译,我们可以实现不刷新页面的情况下,更新我们的页面。
安装依赖
npm install webpack-dev-server -D
修改webpack.config.js配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/main.js',
output: {...},
module: {...},
plugins: [...],
devServer: {
contentBase: resolve(__dirname, './build'), // 指定服务器资源的根目录
compress: true, // 启用压缩
open: true, // 自动打开浏览器
hot: true, // 启用热更新功能
port: 8000 // 自定义端口号
}
}
修改package.json文件,在scripts属性中添加一个start属性,用于开启devServer:
"scripts": {
"build": "webpack --config ./webpack.config.js",
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
}
运行 npm start 即可开启devServer服务器。
6. 完整项目开发环境配置
手写不易,希望能帮助到你,觉得可以的话,给个star呗~