vue ts开发环境之webpack配置

crayon-shin-chan

于 2018-10-01 19:07:55 发布

阅读量1.5k

点赞数

分类专栏： vue surprise 文章标签： vue webpack ts

本文链接：https://blog.csdn.net/qq_27868061/article/details/82918038

版权

surprise 同时被 2 个专栏收录

932 篇文章 41 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

vue

24 篇文章 0 订阅

订阅专栏

本文详细介绍了在TypeScript环境下，如何配置Vue.js与Webpack的整合，包括添加.ts和.vue的extensions扩展名，使用vue-loader处理.vue组件，通过ts-loader解析TypeScript代码，以及结合css-loader、sass-loader、vue-style-loader处理样式文件，url-loader和file-loader处理静态资源，同时使用VueLoaderPlugin确保正确运行。

摘要由CSDN通过智能技术生成

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,

了解本专栏