- 1、建一个文件夹
- 2、初始化 npm
- 3、webpack、webpack-cli
- 4、src、public
- 5、入口文件
- 6、配置打包命令
- 小知识：loader 和 plugin
- 7、打包 html
- 打包 CSS
- 打包图片
- 配置 babel
- 打包 Vue
- 配置路径别名
- webpack-dev-server
- 区分环境
- 构建进度条
- source-map
- 环境变量
- 优化、规范
大家平时在进行 Vue 开发的时候，大部分人都是使用 Vue-cli 这个现成的 Vue 脚手架来进行开发的，但是用它用了这么久，你难道不想自己搭一个属于自己的Vue-cli吗？
今天我就带大家来搭建一个基本的Vue-cli，也可以让大家对Webpack有更深入的了解！建议大家一定要跟着我一步一步来哦！
事先说明：本文只介绍 vue-cli 基本配置，关于优化、规范这两方面，我后面会再写两篇文章进行讲解。
1、建一个文件夹
新建一个文件夹 my-vue-cli 用来存放项目。
2、初始化 npm
在终端中输入：
npm init
然后一直回车就行，这样能使项目拥有一个 npm 管理环境，之后可以在此环境上安装我们所需要的包。
3、webpack、webpack-cli
安装webpack、webpack-cli：
webpack：打包的工具webpack-cli：为 webpack 提供命令行的工具
npm i webpack webpack-cli -D
4、src、public
在根目录下新建src、public这两个文件夹，前者用来放置项目主要代码，后者用来放项目公用静态资源
public/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>my-vue-cli</title> </head> <body> <div id="app"></div> </body> </html>
src/main.js
import { add } from './tools/add.js'
console.log(add(1, 2))
console.log('我是 main.js')
src/tools/add.js
export const add = (a, b) => {
return a + b
}
5、入口文件
刚刚的main.js就是我们的入口文件，也就相当于整个引用树的根节点，webpack 打包需要从入口文件开始查找，一直到打包所有引用文件。
进行入口文件的配置，在根目录下新建webpack.config.js：
const path = require('path')
module.exports = {
// 模式 开发模式
mode: 'development',
// 入口文件 main.js
entry: {
main: './src/main.js'
},
// 输出
output: {
// 输出到 dist 文件夹
path: path.resolve(__dirname, './dist'),
// js 文件下
filename: 'js/chunk-[contenthash].js',
// 每次打包前自动清除旧的 dist
clean: true,
}
}
6、配置打包命令
到package.json里配置打包命令：
"scripts": {
"build": "webpack"
},
现在我们到终端输入npm run build，就能发现打包成功：
source-map
source-map的作用：代码报错时，能快速定位到出错位置，webpack5的所有source-map 模式可以看 webpack 官网：点击这里
这里我使用两种模式：
development：使用eval-cheap-module-source-map模式，能具体定位到源码位置和源码展示，适合开发模式，体积较小production：使用nosources-source-map，只能定位源码位置，不能源码展示，体积较小，适合生产模式
所以我们开始配置source-map。
webpack.dev.js
// 刚才的代码...
module.exports = merge(base, {
// 刚才的代码...
devtool: 'eval-cheap-module-source-map'
})
webpack.prod.js
// 刚才的代码...
module.exports = merge(base, {
// 刚才的代码...
devtool: 'nosources-source-map'
})
环境变量
配置devlopment、production这两个环境的环境变量。
webpack.dev.js
// 刚才的代码...
const webpack = require('webpack')
module.exports = merge(base, {
// 刚才的代码...
plugins: [
// 定义全局变量
new webpack.DefinePlugin({
process: {
env: {
NODE_DEV: JSON.stringify('development'),
// 这里可以定义你的环境变量
// VUE_APP_URL: JSON.stringify('https://xxx.com')
},
},
}),
]
})
webpack.prod.js
// 刚才的代码...
const webpack = require('webpack')
module.exports = merge(base, {
// 刚才的代码...
plugins: [
// 定义全局变量
new webpack.DefinePlugin({
process: {
env: {
NODE_DEV: JSON.stringify('prodction'),
// 这里可以定义你的环境变量
// VUE_APP_URL: JSON.stringify('https://xxx.com')
},
},
}),
]
})
优化、规范
关于优化、规范，我会另外再写两篇文章来讲。