前言
相信有很多同学和我一样,在学习
vue
的时候,经常是通过vue-cli / @vue/cli
来搭建vue的前端项目,虽然这个脚手架很方便也很强大,但作为一个前端人来说学习通过webpack
来自己搭建一个项目也是非常有必要的。
前段时间在学习搭建过程实践中遇到一些问题,刚好看到掘金上对于webpack + vue + ts
这方面的文章比较少,因此在这里写下我自己的搭建过程,欢迎大家参考和提出意见。
⚡「内容速览」⚡
- webpack基础
- vue + ts后的变化
- vue + ts + webpack的配置过程
- 项目实践结果
webpack基础
webpack是用于javascript应用程序的静态模块打包工具。它可以看作是模块打包机,所做的事情就是分析我们的项目结构,构建一个依赖图,通过依赖图映射项目所需要每个模块,打包成1个或多个bundle(包)供浏览器使用。
webpack的基础知识有很多,这里有4个我们首先要了解的概念:
- entry(入口)
- output(输出)
- loader(加载器,webpack只能理解js和json文件)
- plugin(插件,扩展 webpack 能力,例如打包优化,资源管理,注入环境变量) 具体教程:webpack概念 上讲的很清晰,在进行webpack配置项目时,这些知识都是必不可少的。
vue + ts后的变化
-
原本以js结尾的文件名,后缀改为ts
-
tsconfig.json文件 tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项,简单就是指定ts编译的配置文件,具体配置内容和作用可以参考:tsconfig.json概述。
-
ts识别vue ts默认是识别不了*.vue后缀的文件的,因此我们需要声明vue的.d.ts声明文件,来告诉ts怎么处理*.vue文件。
-
vue写法上的变化 vue结合了ts写法上主要改变在script部分,具体使用方法:vue-property-decorator的简单介绍 这篇文章。
vue + ts + webpack的配置过程
- 初始化项目 初始化项目,安装所依赖包:
npm init 或 npm init -y
// 安装依赖
npm i vue vue-class-component vue-property-decorator -s
// 这里先安装一些基本依赖,后面还有部分以来跟着步骤再进行安装
npm i webpack webpack-cli typescript ts-loader vue-loader -D
- webpack配置 创建webpack文件夹,新建webpack.base.conf.js(webpack基本配置文件)。
配置入口起点:
entry: path.resolve(__dirname, '../src/index.ts')
配置输出(位置、命名):
output: {
publicPath: "./",
path: path.resolve(__dirname, "..", "dist"),
filename: "[name].[chunkhash:5].bundle.js",
chunkFilename: "[name].[chunkhash:5].chunk.js",
}
配置resolve
告诉webpack按一定顺序寻找解析这些后缀名:
resolve: {
extensions: [ '.tsx', '.ts', '.js', '.vue', '.json' ]
}
配置module.rules告诉webpack如何去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用和被添加到依赖图中(这里有一些之前没有安装完的loader,大家可以再安装一下):
module: {
rules: [
{
test: /\.vue$/,
use: [
"vue-loader"
]
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
appendTsxSuffixTo: [/\.vue$/],
transpileOnly: true,
}
}
]
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
}
]
},
{
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name].[chunkhash:5].[ext]",
limit: 1024 * 10,
esModule: false
}
}
]
},
{
test: /\.html?$/,
use: [
{
loader: 'html-loader'
}
]
}
]
}
配置plugins来为html动态引入打包后生外部资源(script,link),同时引入VueLoaderPlugin
(vue-loader 15更新:需配合该插件才能正确使用):
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
favicon: path.resolve(__dirname, '../src/favicon.ico'),
template: path.resolve(__dirname, "../src/index.html"),
minify: {
collapseWhitespace: true
}
}),
new VueLoaderPlugin()
]
配置devserver(开发服务器)帮组我们更便捷的在本地进行项目的开发:
devServer: {
host: '0.0.0.0',
port: 8002
}
package.json上编写webpack的运行指令:
"scripts": {
"dev": "webpack serve --config webpack/webpack.base.conf.js"
},
在terminal运行npm run dev: 可以看到我们项目已经跑起来了,但有一个warning就是webpack配置中没有设置mode,我们通常会区分开发环境和生产环境,进行不同的配置,像刚刚的devserver配置就不能用在生产环境中,详细的内容会在后续进阶文章中继续为大家讲解webpack的开发环境和生产环境的配置,先设置mode="development"。
重新运行npm run dev:
项目实践结果
打开浏览器,输入http://localhost:8000/ 项目能够正常被访问。实际上我们这份webpack配置还有很多问题,比如说没有区分开发和生产环境,没有配置热更新,没有进行优化,还有一些其它的类型的文件没有配置loader进行处理,远远无法满足复杂的项目需求,还有很大的提升空间,努力学习,写出更好的总结。