Webpack+Vue+Ts完备搭建配置过程

源码 · 2024-9-3 22:42:21

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文件，内容如下：
<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,报下面错误：

办理方法是让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"就可以了
<template> <div> 我是jack,{{message}} </div></template><script lang="ts"> export default{ name:'Hello', data(){ return{ message:"你好" } } }</script>改完会报一个错误，如图所示：

只需在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

Webpack+Vue+Ts完备搭建配置过程

浏览过的版块

所属分类: 问答交流

新帖推荐: 30日

推荐作品