文章正文
- 前言
- 安装 webpack
- 创建项目
- 创建一个简单的 Demo
- 编译 ES6 代码
- 编译 Vue 代码
- 配置 vue-router
- 让项目绑定端口跑起来
- 编译生成 html 文件
- 处理 CSS
- cross-env
- 使用 Less
- 处理图片
- 处理字体
- 优化缓存
- clean-webpack-plugin
- 抽离公共代码
- 优化组件的引入路径
- 配置懒加载
- 拆分webpack
- 结语
- 1. 创建 index.js 文件
- 2. 在当前项目安装 webpack
- 3. 创建 webpack.dev.config.js
- 4. 在根目录创建 HTML 文件
- 5. 执行编译命令
- 1. 安装 ES6 需要的 loader
- 2. 创建 .babelrc 文件
- 3. 修改 webpack.dev.config.js 配置
- 4. 添加 ES6 的代码
- 5. 执行编译命令
- 1. 安装解析 Vue 语法的 loader 和 Vue
- 2. 修改 webpack.dev.config.js 配置
- 3. 添加 Vue 模板文件
- 4. 执行编译命令
前言
前段时间一直在找工作，作为前端目前最火的技术栈 Vue，被问到了很多次，其中问得最多的就是有没有自己动手搭过脚手架。
于是自己就尝试着搭建 Vue 脚手架，在搭建脚手架的过程中，自己也遇到了各式各样的问题，在此，我想把这些过程一步一步地写下来。本文的项目文件夹会一个一个地构建，配置每一行都会有注释，每一个文件干什么、配置是做什么的都会给大家介绍，供大家学习参考。
安装 webpack
在这里我已经假设用户已经安装 Node 环境，我就不介绍 Node 环境的安装，接下来我们安装 webpack，这里要全局安装，否则之后 webpack 命令无法执行。
npm install --g webpack webpack-cli
创建项目
使用右键创建文件夹 my-app，进入文件打开命令提示符或者 PowerShell，执行 npm init，直接全部回车，我们会看到文件夹里会多了一个 package.json 的文件，这里面主要是对当前项目的一些描述。
创建一个简单的 Demo
这里我准备随便写而一段 ES5 的代码，然后通过 webpack 打包，介绍 webpack 基本的输入输出配置。
1. 创建 index.js 文件
在根目录创建 src 文件夹，在该文件夹下创建 index.js 文件，并输入如下代码：
document.getElementById("app").innerHTML = "hello webpack";
2. 在当前项目安装 webpack
npm install --save-dev webpack webpack-cli
在以前只需要安装 webpack 即可，但是现在必须安装 webpack-cli，否则 webpack 命令会出错。
3. 创建 webpack.dev.config.js
我们在根目录建一个名为 webpack.dev.config.js 的文件，写上如下代码：
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'app.js'
}
};
- entry：入口，一般配置项目的入口文件
- __dirname：node下的全局变量，返回的是当前项目的绝对路径
- output：项目的输出配置
- output.path：输出路径
- output.filename: 输出文件名称
4. 在根目录创建 HTML 文件
在根目录创建名为 index.html 的文件，在 body 中写下如下内容，./dist/app.js 这个文件暂时是不存在的，编译之后才会有。
<body>
<div id="app"></div>
<script src="./dist/app.js"></script>
</body>
5. 执行编译命令
在根目录执行编译命令，格式：webpack --config 文件名称
webpack --config webpack.dev.config.js
然后我们会看到根目录自动生成了 dist 文件夹，里面有一个 app.js，和 webpack.dev.config.js 里面输出是吻合的。这里来有一个警告：是指没有设置 webpack 的环境（生产 or 开发）。
一般解决方式两种：
修改命令
webpack --config webpack.dev.config.js --mode=development 或者 production
在 webpack.dev.config.js 里面的 entry 同级配置 mode:"development" 或者 mode:"production"。
在浏览器打开第 4 步在根目录创建的 index.html。
编译 ES6 代码
刚才演示了如何编译 ES5 的代码，接下来我们来看如何编译 ES6 的代码。
1. 安装 ES6 需要的 loader
- babel-core：调用 Babel 的 API 进行转码
- babel-preset-env：用于解析 ES6 的语法
npm install babel-core babel-loader babel-preset-env --save-dev
2. 创建 .babelrc 文件
创建 .babelrc 文件，并输入如下字符：
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 7"]
}
}
]
],
}
3. 修改 webpack.dev.config.js 配置
因为我们需要把 ES6 的代码转为 ES5 的代码，除了安装对于的 loader 外，还需要在 webpack.dev.config.js 中配置对于的解析规则。
在 output 的同级写入如下配置：
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude:/node-modules/
},
]
}
解析规则在 module 下的 rules 中配置，test 表示匹配的文件，loader 表示使用什么加载器，exclude 表示禁止解析该目录下的文件。
4. 添加 ES6 的代码
使用了 ES6 的箭头函数和字符串拼接方式，把 src 目录下的 index.js 文件修改为：
var str = "babel"
var func = s => {
document.getElementById("app").innerHTML = `hello ${s}`;
}
func(str);
5. 执行编译命令
执行命令：
webpack --config webpack.dev.config.js --mode=development
结果出现如下错误：
Error: Cannot find module
