Vue ts开发环境之webpack配置

webpack.conf.ts

import * as webpack from 'webpack'
import * as HtmlWebpackPlugin from "html-webpack-plugin"
import { VueLoaderPlugin } from "vue-loader"

/** webpack的ts配置文件 */
const config: webpack.Configuration = {
    
    /**开发环境 */
    mode: "development",
    /**基目录为src */
    context: __dirname+"/src",
    /**入口文件，生成vue实例 */
    entry: {
        index: './main.ts'
    },
    output: {
        /**构建目录 */
        path: __dirname.replace('frontend','static'),
        /**开发目录 */
        publicPath: '/',
        /**js文件格式 */
        filename: 'js/[name].js'
    },
    devtool: false,
    watch: false,
    profile: true,
    cache: true,
    parallelism: 8,
    optimization: {
        removeEmptyChunks: true,
        mergeDuplicateChunks: true,
        occurrenceOrder: true,
        minimize: false,
        /**提取通用代码块，多个入口文件时使用，这里的common块也要加入html */
        splitChunks: {
            chunks: 'all',
            name: 'common'
        },
    },
    resolve: {
        extensions: ['.ts','.js', '.vue', '.json']
    },
    module: {
        rules: [
            /**vue loader，用于加载.vue文件，分离style、template、script等元素内容 */
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    transformToRequire: {
                        video: ['src', 'poster'],
                        source: 'src',
                        img: 'src',
                        image: 'xlink:href'
                    }
                }
            },
            /**加载ts文件，至于这个为vue文件添加后缀，我也不知道干嘛的 */
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                options: { 
                    appendTsSuffixTo: [/\.vue$/]
                }
            },   
            /** scss，可以在vue的style中使用scss语法 */     
            {
                test: /\.scss$/,
                use: ['vue-style-loader','css-loader','sass-loader']
            },
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test: /(\.jpg)|(\.jpeg)|(\.png)|(\.svg)|(\.gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8800,
                        fallback: 'file-loader',
                        name: '[path][name]_[hash].[ext]',
                        outputPath: '',
                        publicPath: ''
                    }
                }
            },
            {
                test: /(\.woff)|(\.ttf)$/,
                use:{
                    loader: 'file-loader',
                    options:{
                        name: '[path][name]_[hash].[ext]',
                        outputPath: '',
                        publicPath: ''
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin({
            banner: '谁看打死谁',
            entryOnly: true
        }),
        /**生成唯一入口html */
        new HtmlWebpackPlugin({
            title: "Activiti",
            filename: `./index.html`,
            /**需要加入的js块 */
            chunks: ['common','index'],
            chunksSortMode: 'dependency',
            template: './index.html',
            inject: 'body',
            xhtml: true  
        }),
        /**需要一个vue-loader插件 */
        new VueLoaderPlugin()
    ]
};
export default config

1.ts环境下webpack使用ts配置

2.extensions扩展名选项需要添加.ts .vue选项

3.vue-loader:用于分解.vue组件文件,这里会将其分解为template,ts文件,sass文件这三种,其中模板加入Vue组件类的render函数中

4.ts-loader:用于加载vue-loader分解出的ts文件,需要设置选项

5.vue-style-loader,css-loader,sass-loader:用于加载scss文件,加载顺序是反过来的,最后交给vue-style-loader,由它实现组件范围的样式

6.css-loader,style-loader:用于加载原生css文件,比如element-ui的样式文件

7.url-loader:用于加载图片文件,如果过大会变为file-loader

8:file-loader:用于加载字体文件

9.VueLoaderPlugin:配合vue-loader使用