webpack创建Vue3

webpack创建

创建相关文件目录

 npm init -y    
 tsc --init      

下载webpack和webpack-cli

创建webpack.config.js必须为common js写法

npm add webpack  
npm add webpack-cli 
//添加webpack启动器
npm add webpack-dev-server    

添加html-webpack-plugin

 npm add html-webpack-plugin  

安装所需的依赖

{
  "name": "webpackcreatevue3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@vue/compiler-sfc": "^3.2.47",
    "css-loader": "^6.7.3",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^5.5.0",
    "pnpm": "^7.29.3",
    "style-loader": "^3.3.2",
    "ts": "^0.2.2",
    "typescript": "^5.0.2",
    "vue": "^3.2.47",
    "vue-loader": "^17.0.1",
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.1"
  }
}

配置vue声明文件，否则无法识别vue

创建

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

webpack.config.js

const {Configuration} = require ('webpack')
const  path = require("path")
const htmlwebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorWebpackPlugin = require('friendly-errors-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index');
//注解方式加提示
/**
 * @type {Configuration}
 */
const config = {
    mode:"development",
    entry: "./src/main.ts",
    module: {
        //文件规则
        rules: [
            {
            //使用vue-loader解析.vue文件
            test:/\.vue$/,
            use: "vue-loader"
            },
            {
                test: /\.css$/, //解析css
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.ts$/,  //解析ts
                loader: "ts-loader",
                options: {
                    configFile: path.resolve(process.cwd(), 'tsconfig.json'),
                    appendTsSuffixTo: [/\.vue$/]
                },
            }]
    },
    //打包后文文件规则
    output: {
        filename: "[hash].js",
        path: path.resolve(__dirname,'dist'),
        clean:true
    },
    //配置补全文件，别名
    resolve: {
        alias: {
            '@':path.resolve(__dirname,'src')
        },
        extensions: ['.vue','.ts','.js']
    },
    //插件分装
    plugins: [
        new htmlwebpackPlugin({
            template: "./public/index.html"
        }),
        new VueLoaderPlugin(),
        new FriendlyErrorWebpackPlugin({
            compilationSuccessInfo:{ //美化样式
                messages:['You application is running here http://localhost:9001']
            }
        })
    ],
    devServer: {
        port:9001
    },
    //性能优化,打包后大小更小
    externals: {
        vue:"vue"
    }
}

module.exports = config