zoukankan      html  css  js  c++  java
  • webpack + ts 项目的初始化

    2019-12-17   第一次更新----------------------------------------------------------

    1.大的环境配置,git  node  webpack 等等的一些插件全局安装,一般国内使用npm下载(服务器架设在国外)会有一些网络问题,可以使用淘宝镜像代理,但是不建议这么做,因为淘宝镜像下载依赖经常出现各种各样的奇葩问题,总之可以用npm的话就不用cnpm(淘宝镜像)。这些东西下载的话可以自行百度(一大堆),这里就不详述了。

    2.进入项目目录文件夹,一般来说这时候是一个空的文件夹。

    运行  npm init -y  或者  npm init        前者更省事儿一点。

     3.运行 npm install -D webpack  在项目目录下安装webpack,同时高版本的webpack还需要 安装webpack-cli,安装方法与前面类似。

     4.在项目根目录文件夹下创建一个webpack.config.js文件(这里给出一份基础的配置内容):

    module.exports = {
    
        mode: 'development',
    
        //入口
    
        entry: __dirname + '/src/index.ts',
    
        //出口
    
        output: {
    
            path: __dirname + '/dist',
    
            filename: 'bundle.js',
    
        },
    
        module: {
    
            rules: [
    
                {
    
                    test: /.tsx?$/,
    
                    use: {
    
                        loader: 'ts-loader'
    
                    }
    
                },
    
            ]
    
        },
    
        resolve: {
    
            extensions: [".ts", ".js"],
    
            alias: {
    
                "@": __dirname + "/src",
    
                // "@component": __dirname + "src/component",
    
                // "@pages": __dirname + "src/pages",
    
                // "@utils": __dirname + "src/utils",
    
            },
    
        }
    
    }





    5.在上述配置文件中可以看到我们使用了TS(typescript)依赖,首先需要下载依赖:

      npm install -D typescript ts-loader 其次,再在webpack.config.js中做出配置(这里我直接先展示了配置好的文件)。

     

    6.接下来需要在项目根目录文件夹中创建tsconfig.json文件,这里同样提供一份基础的ts打包配置文件:

    {
    
        "compilerOptions": {
    
            "baseUrl": ".",
    
            "paths": {
    
                "@/*": ["src/*"]
    
            },
    
            "module": "commonjs",
    
            "target": "es5",
    
            "sourceMap": true,
    
            "allowSyntheticDefaultImports": true,
    
            "esModuleInterop": true,
    
            "allowJs": true,
    
        },
    
        "include": [
    
            "src/ts/*",
    
            "src/*"
    
        ],
    
        "exclude": [
    
            "node_modules",
    
            "dist"
    
        ]
    
    }

    7.至此,包含一个入口一个出口,可以使用ts编程的基础框架就做好了,如果需要打包htmlcss文件,需要下载和配置额外的依赖。附一张目前为止的项目文件目录结构:

     

    附:有关webpack打包的快捷命令设置(在package.json文件中):

    "scripts": {
    
        "test": "echo "Error: no test specified" && exit 1",
    
        "dev": "webpack --mode development",
    
        "build": "webpack --mode production"
    
      }

    配置完成后,可以使用npm run dev 以及 npm run build 做开发环境/生产环境的打包设置。

    (手懒 + 技术菜 + 随便写写,随缘更新了。)

    2020-03-31   第二次更新----------------------------------------------------------

     

    8.webpack热更新:

     

     npm install babel-preset-es2015 --save-dev

    安装babel并在项目根目录创建.babelrc文件,初始配置:{"presets": ["es2015"]}

    安装webpack-dev-servernpm install webpack-dev-server --save-dev

    package.json中修改script部分的脚本如下:

    "scripts": {
    
     
    
        "test": "echo "Error: no test specified" && exit 1",
    
     
    
        "dev": "webpack --mode development && webpack-dev-server --progress --colors",
    
     
    
        "build": "webpack --mode production"
    
     
    
      }

     

    如上代码,在运行dev时加了webpack-dev-server --progress --colors

    的热更新相关命令。此时再改变src中的工程代码,npm就会执行自动打包。(绑定一个小型的express服务器到localhost:8090,来为你的静态资源及bunble(自动编译)服务。但是到目前为止,index.html还是个本地文件,怎么生成一个服务器上的Index.html文件呢?

    1)安装html-webpack-plugin

    npm install html-webpack-plugin --save-dev

    2)配置html-webpack-plugin

    修改webpack.config.js为如下:

    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        mode: 'development',
        //入口
        entry: __dirname + '/src/index.ts',
        //出口
        output: {
            path: __dirname + '/dist',
            filename: 'bundle.js',
        },
        module: {
    
            rules: [
    
                {
                    test: /.tsx?$/,
    
                    use: {
    
                        loader: 'ts-loader'
    
                    }
                },
            ]
        },
    
        resolve: {
    
            extensions: [".ts", ".js"],
    
            alias: {
    
                "@": __dirname + "/src",
    
                // "@component": __dirname + "src/component",
    
                "@pages": __dirname + "/src/pages",
    
                // "@utils": __dirname + "src/utils",
    
            },
        },
        devServer: {
            inline: true,
            port: 8080,
        },
    
        plugins: [
    
            new HtmlWebpackPlugin({
    
                template: './index.html'
    
            }),
    
            new webpack.HotModuleReplacementPlugin()
        ]
    
    }

    主要是增加了plugins配置以及该配置相关的依赖引入。

     

     9.引入react相关依赖

    (现如今做前端,最基础的就是三大框架得会一个了吧,不然面试的时候可咋说~那么在webpack项目中如何使用react框架进行项目编写呢?)

    1)第一步当然是下载相关的依赖包了:

    npm install --save react react-dom

    2)接下来就是修改各种配置了:

    tsconfig.json配置开始,首先需要在tsx文件里头支持jsx,然后需要配置编译过程中需要引入的库文件的列表(老实说,不太明白这个配置的意义,但是不配它就报错呀~),同时在原来的基础上优化了编译的包含目录(只是写法改变,包含不变)。上代码(这次我对一些改变的配置做了注释,写代码打注释是个好习惯):

    {
        "compilerOptions": {
            "baseUrl": ".",
            "paths": {
                "@/*": ["src/*"],
                "@pages/*": ["src/pages/*"]
            },
            "module": "commonjs",
            "target": "es5",
            "jsx": "react",    //在tsx文件里支持jsx
            "sourceMap": true,
            "allowSyntheticDefaultImports": true,
            "esModuleInterop": true,
            "allowJs": true,
            "lib": ["es2015", "dom", "es2015.promise"], //编译过程中需要引入的库文件的列表
        },
        "include": [
            "src/**/*"           //编译包含在  src及其子目录下的所有匹配的文件
        ],
    
        "exclude": [
    
            "node_modules",
    
            "dist"
    
        ]
    
    }

    再接下来是webpack.config.js文件配置的修改:首先修改入口为index.tsx,同样的文件名称也要从index.ts变成index.tsx,这么做是因为react就是jsx语法嘛~;之后,resolve里头的extensions配置数组也需要添加.tsx文件类型。这样基本就ok了。上代码(老实说,每次改一丢丢都把完整的配置贴出来,这在编程里叫什么,冗余~但是便于阅读理解,没有想到更好的办法之前就这样了):

    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    // const Merge = require("webpack-merge");
    module.exports = {
        mode: 'development',
        //入口
        entry: __dirname + '/src/index.tsx',
        //出口
        output: {
            path: __dirname + '/dist',
            filename: 'bundle.js',
        },
        module: {
            rules: [
                {
                    test: /.tsx?$/,
                    use: {
                        loader: 'ts-loader'
                    }
                },
            ]
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js"],    //添加支持的文件类型
            alias: {
                "@": __dirname + "/src",
                // "@component": __dirname + "src/component",
                "@pages": __dirname + "/src/pages",
                // "@utils": __dirname + "src/utils",
    
            },
        },
        devServer: {
            inline: true,
            port: 8080,
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.html'
    
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    }

    好的,这样我们就可以在项目中愉快的使用ts+react来编写了。

    (结尾预告一下之后的方向,排名不分先后:多页面webpack配置 + 开发/生产环境webpack配置 + css相关依赖引入配置)。

    10.引入less相关依赖

    npm install --save-dev css-loader less-loader less style-loader

     

    webpack.config.js中增加如下模块配置:

    module: {
            rules: [
                ...
    
                { 
                    test:/.less$/,
                    use: ['style-loader','css-loader','less-loader']
                },
                { 
                    test:/.css$/,
                    use: ['style-loader','css-loader']
                },
            ]
    
    }

    ———————————————— 完结(预告一下,下篇随笔有个关于此篇随笔的后续)——————————————

     

  • 相关阅读:
    高级特性(4)- 数据库编程
    UVA Jin Ge Jin Qu hao 12563
    UVA 116 Unidirectional TSP
    HDU 2224 The shortest path
    poj 2677 Tour
    【算法学习】双调欧几里得旅行商问题(动态规划)
    南洋理工大学 ACM 在线评测系统 矩形嵌套
    UVA The Tower of Babylon
    uva A Spy in the Metro(洛谷 P2583 地铁间谍)
    洛谷 P1095 守望者的逃离
  • 原文地址:https://www.cnblogs.com/woailiming/p/12055223.html
Copyright © 2011-2022 走看看