环境准备
1、Node
下载地址：http://nodejs.cn/
如果需要使用 yarn，请先通过 npm install yarn -g 安装
2、Webpack
npm i -g webpack
# or
yarn add webpack -g
3、Git
非必要，仅是为了最后搭建出来的 vue 项目能够上传至远程仓库进行代码托管。
Mac --> brew install git
windows --> https://gitee.com/ralphGodzilla/tools
4、Vscode
非必要，vscode 是一款轻量型的开发工具，能够极大提升我们的开发效率。
下载地址：https://gitee.com/ralphGodzilla/tools
项目准备
1、创建一个根目录 VueWebpackCli
mkdir VueWebpackCli
2、进入 VueWebpackCli 目录
cd VueWebpackCli
3、初始化项目
npm init -y
# or
yarn init -y
4、修改 package.json 的内容
{
"name": "vue-webpack-cli",
"version": "1.0.0",
"main": "main.js",
"license": "MIT"
}
5、创建目录 src 用于放置开发资源，dist 目录用于放置打包后的资源，public 目录用于放置静态资源
mkdir src dist public
6、本地安装 webpack 及其依赖文件
npm i -D webpack webpack-cli webpack-dev-server
# or
yarn add -D webpack webpack-cli webpack-dev-server
6.1 webpack
webpack是一个模块打包器，主要用于捆绑js文件在浏览器中使用。
6.2 webpack-cli
webpack CLI为开发人员提供了一组灵活的命令，以在设置自定义 webpack 项目时提高速度。
6.3 webpack-dev-server
将 webpack 与提供实时重新加载的开发服务器一起使用。
7、在 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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body></body>
</html>
8、在根目录下创建并配置 webpack.config.js
const path = require('path')
module.exports = {
// mode 选项用于告知 webpack 应当使用何种模式的内置优化
mode: process.env.NODE_ENV !== 'development' ? 'production' : 'development',
// entry 选项指示 webpack 应当使用那个模块来构建内部依赖图的开始。
entry: path.resolve(__dirname, './src/main.ts'),
// output 选项用来告诉 webpack 在哪里输出它创建的 bundle，以及如何命名这些文件
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
// resolve 选项告诉 webpack 如何解析模块
resolve: {
modules: ['node_modules'],
// 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
extensions: ['.ts', '.tsx', '.js'],
// 创建 import 或 require 的别名，来确保模块引入变得更简单
alias: {
src: path.resolve(__dirname, './src'),
dist: path.resolve(__dirname, 'dist'),
public: path.resolve(__dirname, './public')
}
},
// devServer 选项通过 webpack-dev-server 的这些配置，能够以多种方式改变其行为。
devServer: {
allowedHosts: 'all',
host: 'localhost',
port: 8089,
open: true,
compress: true,
static: {
directory: path.join(__dirname, 'dist')
},
client: {
overlay: {
errors: true,
warnings: false
}
}
}
}
9、安装插件 HtmlWebpackPlugin
npm i -D html-webpack-plugin
# or
yarn add html-webpack-plugin -D
10、在 webpack.config.js 中配置插件
plugins: [
new HtmlWebpackPlugin({
title: 'Hello Webpack',
favicon: './public/favicon.svg', // 没有图标可不配置
template: './public/index.html'
})
]
11、创建主入口文件 /src/main.ts
touch ./src/main.ts
12、全局安装 typescript ，并在项目安装typescript依赖
npm i -g typescript
npm i -D typescript ts-loader
# or
yarn add typescript -g
yarn add typescript ts-loader -D
13、配置 webpack.config.js 中的loader
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
}
14、配置 package.json 中的 scripts 脚本
"scripts": {
"serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}
15、下载 cross-env
npm i -D cross-env
# or
yarn add cross-env -D
16、下载 CleanWebpackPlugin 插件
npm i -D clean-webpack-plugin
# or
yarn add clean-webpack-plugin -D
17、更新 webpack.config.js 中的插件配置
// 注意，无论是 HtmlWebpackPlugin 还是 CleanWebpackPlugin 都应该提前引入到此文件。
// 例如：const CleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: 'Hello Webpack',
favicon: './public/favicon.svg',
template: './public/index.html'
}),
new CleanWebpackPlugin()
]
这个时候我们可以通过运行 yarn serve / npm run serve 查看运行效果啦！
18、下载 sass 所需loader
npm i -D sass sass-loader style-loader css-loader
# or
yarn add sass sass-loader style-loader css-loader -D
19、更新 webpack.config.js 中的 loader配置 和 resolve 中的 extensions配置
resolve: {
modules: ['node_modules'],
// 尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。
extensions: ['.ts', '.tsx', '.js', '.sass', '.scss', '.css'],
// 创建 import 或 require 的别名，来确保模块引入变得更简单
alias: {}
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
exclude: /node-modules/
}
]
}
20、下载 vue 相关loader和依赖
npm i -D vue-loader@14.2.2 vue-template-compiler@2.6.4
npm i vue@2 --save-dev
# or
yarn add vue-loader@14.2.2 vue-template-compiler@2.6.4 -D
yarn add vue@2
21、更新 webpack.config.js loader配置
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader'
],
exclude: /node-modules/
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
}
22、新建类型声明文件 /types/vue.d.ts
declare module '*.vue' {
import vue from 'vue'
export default vue
}
23、更新主入口文件 /src/main.ts
import Vue from 'vue'
import App from './views/App.vue'
new Vue({
render: (h: Function) => h(App)
}).$mount('#app')
24、更新主页 /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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
