Webpack+Vue+Ts完整搭建配置过程
1、webpack的基本配置
（1）、在vscode终端中运行以下命令：
mkdir webpack-demo 创建目录
cd webpack-demo 进入目录
npm init -y 创建package.json文件
npm install webpack webpack-cli --save-dev 安装webpack和webpack-cli
（2）、新建文件夹src，在src里面新建index.js文件，然后输入下面代码
console.log('1')
（3）、在目录下新建一个webpack.config.js文件,可以到webpack官网拿到文件的配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
（4）、运行 npx webpack ,会报下面错误
2.png
解决方法是在webpack.config.js文件，新增一句 mode:'development'
const path = require('path');
module.exports = {
entry: './src/index.js',
mode:'development', //新增这一句代码
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
再次运行 npx webpack,如图说明运行成功
3.png
运行成功之后，会在目录中生成一个dist文件夹，里面有个main.js文件。这是index.js经过打包之后生成的main.js。
（5）、配置运行环境命令
！开发环境--在package.json文件中配置命令：
"build:dev":"webpack", //开发环境
配置位置如图：
4.png
在终端运行命令npm run build:dev,就可以运行webpack生成main.js文件了。
！！生产环境--在package.json文件中配置命令：
"build":"webpack --config webpack.prod.js"
配置位置如图：
5.png
同时在目录下新建一个文件webpack.prod.js文件，内容是：
const path = require('path');
module.exports = {
entry: './src/index.js',
mode:'production', //和开发环境区别是mode模式不一样
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
在终端运行命令npm run build,就可以运行webpack生成main.js文件了。
总结：两者有啥区别，两者都是将index.js变成main.js，不同的是生产环境生成的main.js是经过压缩的，开发环境生产的main.js是没有经过压缩的。
（6）、支持单个页面
安装一个工具webpack-dev-server，就能开发页面了。
安装：npm install webpack-dev-server --save-dev
运行：npx webpack-dev-server
运行进入本地页面之后发现，页面啥也不是，只能通过路径访问到main.js文件，其他都不能做，这个时候就需要意识到我们需要一个index.html才能支持页面,安装这样一个html-webpack-plugin插件即可
安装：npm i --save-dev html-webpack-plugin
安装完之后需要在webpack.config.js文件配置HtmlWebpackPlugin和 plugins，具体位置看注释。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') //新增插件配置
module.exports = {
entry: './src/index.js',
mode:'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [ //新增插件配置
new HtmlWebpackPlugin()
]
};
配置完之后再次运行：npx webpack-dev-server，这时候看到页面是一片空白，但是打开控制台，我们可以看到html标签等内容说明成功了。
6.png
将index.js内容替换成下面的，就可以看到页面有内容存在了。
let div=document.createElement('div')
div.id="app"
div.textContent='Hello'
document.body.appendChild(div)
2、webpack+vue配置使用
（1）、在src文件夹中，新建文件Hello.vue文件，内容如下：
<template>
<div>
我是jack,{{message}}
</div>
</template>
<script>
export default{
name:'Hello',
data(){
return{
message:"你好"
}
}
}
</script>
（2）、配置vue和实例化
安装：npm i vue
import Vue from 'vue'
import Hello from './Hello.vue'
let div=document.createElement('div')
div.id="app"
div.textContent='Hello'
document.body.appendChild(div)
new Vue({
el:div,
render:(h)=>h(Hello)
})
这个时候运行npx webpack-dev-server,报下面错误：
7.png
解决方法是让webpack支持vue,使用vue-loader工具即可
安装:npm install -D vue-loader vue-template-compiler
注意一点就是vue的版本号要和vue-template-compiler安装版本号要一致，文章拉到最后可见我安装的版本号。
安装完工具之后，需要对webpack.config.js进行对应的配置,新增部分我已注释。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader'); //新增插件配置
module.exports = {
entry: './src/index.js',
mode:'development',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: { //新增插件配置
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new VueLoaderPlugin() ////新增插件配置
]
};
最后运行 npx webpack-dev-server，显示成功，页面正常显示如下图：
8.png
3、webpack+ts配置使用
（1）、在src文件夹中，新建一个文件test.ts文件，内容如下：
const a:number=1;
export const b=a;
（2）、在index.js文件中，引入test.ts
import Vue from 'vue'
import Hello from './Hello.vue'
import {b} from './test.ts' //引入ts文件
console.log(b) //打印出ts文件内容
let div=document.createElement('div')
div.id="app"
div.textContent='Hello'
document.body.appendChild(div)
new Vue({
el:div,
render:(h)=>h(Hello)
})
这个时候会报一个错误如下，这是因为webpack不认识ts导致错误：
9.png
解决方法是安装 ts-loader工具
安装：npm install -D ts-loader
安装： npm i -D typescript
安装完之后，配置webpack.config.js文件，新增位置已经注释出来了
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/index.js',
mode:'development',
resolve: {
extensions: [".ts", ".tsx", ".js"] //新增
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.vue$/,loader: 'vue-loader' },
{ test: /\.tsx?$/, loader: "ts-loader" } //新增
]
},
plugins: [
new HtmlWebpackPlugin(),
new VueLoaderPlugin()
]
};
在目录下新建一个tsconfig.json文件，内容如下：
{
"compilerOptions": {
"sourceMap": true
}
}
最后运行 npx webpack-dev-server，显示成功运行，控制台成功打印出一个1，如图：
10.png
这部分用于测试webpack是不是已经支持ts了,成功之后可以删除test.ts文件，将index.js改成ts
（3）、删除test.ts文件和导入，将index.js改写成ts
修改1：index.js文件重命名成index.ts文件
修改:2：webpack.config.js文件路径 entry: './src/index.js'改成entry: './src/index.ts'
运行：npx webpack-dev-server，显示如下错误：
11.png
解决方法：在src文件夹内新建一个shims-vue.d.ts文件，内容如下：
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
再次运行：npx webpack-dev-server，显示运行成功，但是不能显示组件内容，同时控制台报了一个错误：
12.png
解决方法是新增别名，在webpack.config.js文件中新增如下内容：
alias: { //新增别名
'vue': 'vue/dist/vue.esm.js'
},
具体新增位置在resolve对象里面新增，如图所示：
13.png
再次运行：npx webpack-dev-server，显示运行成功，控制台没有报错，成功显示vue的内容。
4、webpack+vue+ts配置使用
（1）、将Hello.vue改成用ts写法，只需在script标签上加上lang="ts"就可以了
<template>
<div>
我是jack,{{message}}
</div>
</template>
<script lang="ts">
export default{
name:'Hello',
data(){
return{
message:"你好"
}
}
}
</script>
改完会报一个错误，如图所示：
14.png
只需在webpack.config.js文件中配置如下内容即可，具体位置看注释位置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
entry: './src/index.ts',
mode:'development',
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {
'vue': 'vue/dist/vue.esm.js'
},
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: { //新增
esModule: true,
}
},
{
test: /\.tsx?$/,
loader: "ts-loader",
options: { //新增
appendTsSuffixTo: [/\.vue$/]
}
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new VueLoaderPlugin()
]
};
再次运行：npx webpack-dev-server，显示运行成功，成功显示vue的内容。这就是完整的webpack+vue+ts完整搭建过程。
最后附赠看一下我的package.json配置插件和工具的版本号，如图所示：
15.png
源码查看点击：GitHub
