初始化

1. npm init

2. tsc --init

如果没有tsc ：npm i -g typescript

3. 新建文件

public/index.html

src/assets

src/views

src/main.ts

src/App.vue

3. 安装webpack

npm i webpack webpack-cli

4. 安装webpack-dev-server

npm i webpack-dev-server

5. 新建webpack.config

webpack.config.js

const { Configuration } = require('webpack')
const path = require('path')

/**
 * 使用注解来获取智能提示
 * @type {Configuration}
 */
const config = {
    mode: "development", // 模式
    entry: './src/main.ts', // 入口文件
    module:{},
    resolve:{
        alias:{// 别名
            '@':path.resolve(__dirname,'src')
        },// 自动识别文件类型
        extensions:['.vue','.ts','.js']
    },
    output: { // 出口
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist')
    }
}
module.exports = config

6. 修改package.json

添加 dev 和 build

// package.json
{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
}

Plugin

安装 clean-webpack-plugin

clean-webpack-plugin可以来帮助我们每次build时项目时清空dist目录

npm i clean-webpack-plugin

// webpack.config.js
const { Configuration } = require('webpack')
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const config = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}
module.exports = config

安装 html-webpack-plugin

html模板

npm i html-webpack-plugin

// webpack.config.js
const { Configuration } = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

const config = {
    plugins: [
        new htmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
}
module.exports = config

Loader

vue-loader

因为webpack无法解析template标签，所以需要vue-loader去帮我们解析

npm i vue-loader@next

npm i @vue/compiler-sfc

// webpack.config.js
const { Configuration } = require('webpack')
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
const config = {
    module:{
        rules:[
            {
                test:/\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    plugins: [new VueLoaderPlugin()]
}
module.exports = config

创建Vue声明文件

因为webpack不识别.vue的文件，所以需要配置声明文件去识别他

env.d.ts

declare module "*.vue"{
    import {DefineComponent} from 'vue'
    const component:DefineComponent<{},{},any>
    export default component
}

css-loader 和 style-loader

npm i css-loader style-loader

const config = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
}
module.exports = config

less 和 less-loader

使用less-loader前需要安装 css-loader 和 style-loader

npm i less less-loader

const { Configuration } = require('webpack')
const path = require('path')

const config = {
    module:{
        rules:[
            {
                test:/\.less$/,
                use: ['style-loader','css-loader','less-loader']
            }
        ]
    }
}
module.exports = config

typescript 和 ts-loader

npm i typescript ts-loader

const { Configuration } = require('webpack')
const path = require('path')

const config = {
    module:{
        rules:[
			{
                test: /\.ts$/,
                loader: 'ts-loader',
                options: {
                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
                    appendTsSuffixTo: [/\.vue$/]
                }
            }
        ]
    }
}
module.exports = config

配置CDN

// webpack.config.js
const config = {
    externals:{ // build时不会打进包里
        vue:'Vue'
    },
}
module.exports = config

代码演示

// webpack.config.js
const { Configuration } = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

/**
 * 使用注解来获取智能提示
 * @type {Configuration}
 */
const config = {
    mode: "development", // 模式
    entry: './src/main.ts', // 入口文件
    module:{
        rules:[
            {
                test:/\.vue$/,
                use: 'vue-loader'
            }
        ]
    },
    resolve:{
        alias:{// 别名
            '@':path.resolve(__dirname,'src')
        },// 自动识别文件类型
        extensions:['.vue','.ts','.js']
    },
    output: { // 出口
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin()
    ]
}
module.exports = config