ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Webpack + TypeScript --- 环境搭建

2022-01-22 21:03:23  阅读:153  来源: 互联网

标签:npm TypeScript const require webpack module --- Webpack config


Webpack + TypeScript --- 环境搭建

一、环境配置

1、新建项目(即新建文件夹:HelloWorld)

 

2、项目初始化:npm  init  -y

 

3、安装typescript

    npm  i   typescript  -g

    tsc  --init

4、目录结构如下:

     

 

5、配置构建工具(webpack5)

    npm  install  webpack  -D

    npm  install  webpack-cli -D

    npm  install  webpack-dev-server@3.11.2  -D

    npm  install  clean-webpack-plugin -D

    npm  install  html-webpack-plugin -D

    npm  install ts-loader

因为typescript是全局安装,所以要在项目运行之前进行链接

    npm  link typescript

  

5.1、webpack.config.js

const { merge } = require("webpack-merge");

const baseConfig = require("./webpack.base.config");

const devConfig = require("./webpack.dev.config");

const proConfig = require("./webpack.pro.config");

 

module.exports = (env,argv)=> {

    let config = (argv.mode === "development")?devConfig : proConfig;

    //合并文件

    return merge(baseConfig,config);

};

5.2、webpack.base.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

    entry: "./src/index.ts",

    output: {

        filename: "app.js",

    },

    resolve: {

        extensions: [".js",".ts",".tsx"],

    },

    module: {

        rules: [

            {

                test: /\.tsx?$/i,

                use: [

                    {

                        loader: "ts-loader",

                    },

                ],

                exclude: /node_modules/,

            },

        ],

    },

    plugins: [

        //通过一个模板帮助生成网站首页,并将输出文件嵌入

        new HtmlWebpackPlugin({

            template: "./src/tpl/index.html",

        }),

    ],

};

 5.3、webpack.dev.config.js

const webpack = require("webpack");

module.exports = {

    plugins: [

        new webpack.LoaderOptionsPlugin({

            options: {

                devtools: "cheap-module-eval-source-map",

            },

        }),

    ],

};

 5.4、webpack.pro.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {

    plugins: [

        new CleanWebpackPlugin(),

    ],

};

 

6、配置文件:package.json

 

 

二、页面文件和ts文件

1、index.ts

let hello:string = "Hello TypeScript";

document.querySelectorAll(".app")[0].innerHTML = hello;

2、index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div class="app"></div>

</body>

</html>

三、启动项目:

      npm  start

访问 http://localhost:8080/

标签:npm,TypeScript,const,require,webpack,module,---,Webpack,config
来源: https://www.cnblogs.com/lone5wolf/p/15835007.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有