原始webpack+Ts

笔记软件在2023/4/15 10:27:21推送该笔记

共安装了7个包:
  - webpack：构建工具webpack
  - webpack-cli：webpack的命令行工具
  - webpack-dev-server：webpack的开发服务器
  - typescript：ts编译器
  - ts-loader：ts加载器，用于在webpack中编译ts文件
  - html-webpack-plugin：webpack中html插件，用来自动创建html文件
  - clean-webpack-plugin：webpack中的清除插件，每次构建都会先清除目录

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "rootDir": "./src",
        "strict": true
    },
    "include": [
        "src/**/*"
      ],
    "exclude": [
        "node_modules",
    ]
}

‍

package.json

{
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
    },
}

‍

webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const config = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        host: 'localhost',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },
            {
                test:/.\ts$/,
                use: 'ts-loader',
            }
        ],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
    } else {
        config.mode = 'development';
    }
    return config;
};