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 ,会报下面错误

解决方法是在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,如图说明运行成功

运行成功之后，会在目录中生成一个dist文件夹，里面有个main.js文件。这是index.js经过打包之后生成的main.js。

（5）、配置运行环境命令

！开发环境--在package.json文件中配置命令：

"build:dev":"webpack",  //开发环境

配置位置如图：

在终端运行命令npm run build:dev,就可以运行webpack生成main.js文件了。

！！生产环境--在package.json文件中配置命令：

 "build":"webpack --config webpack.prod.js" 

配置位置如图：

同时在目录下新建一个文件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标签等内容说明成功了。

将index.js内容替换成下面的，就可以看到页面有内容存在了。

let  div=document.createElement('div')div.id="app"div.textContent='Hello'document.body.appendChild(div)

2、webpack+vue配置使用

（1）、在src文件夹中，新建文件Hello.vue文件，内容如下：

（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,报下面错误：

解决方法是让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，显示成功，页面正常显示如下图：

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导致错误：

解决方法是安装 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，如图：

这部分用于测试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，显示如下错误：

解决方法：在src文件夹内新建一个shims-vue.d.ts文件，内容如下：

declare module '*.vue' {    import Vue from 'vue'    export default Vue  }

再次运行：npx webpack-dev-server，显示运行成功，但是不能显示组件内容，同时控制台报了一个错误：

解决方法是新增别名，在webpack.config.js文件中新增如下内容：

alias: {  //新增别名      'vue': 'vue/dist/vue.esm.js'    },

具体新增位置在resolve对象里面新增，如图所示：

再次运行：npx webpack-dev-server，显示运行成功，控制台没有报错，成功显示vue的内容。

4、webpack+vue+ts配置使用

（1）、将Hello.vue改成用ts写法，只需在script标签上加上lang="ts"就可以了

改完会报一个错误，如图所示：

只需在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配置插件和工具的版本号，如图所示：

源码查看点击：GitHub