从零开始搭建webpack4.X + Vue开发环境

其他 2020-04-01 01:12:18 阅读次数: 0

为了学习和理解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规则

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，这样能大大减少了打包编译后的体积。

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
                    }
                }]
            }
        ]
    }

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'
                    }
                }]
            },
        ]
    }

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呗~

请转到github

hufi
发布了16 篇原创文章 · 获赞 2 · 访问量 1188
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_39075021/article/details/105032389
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022