webpack4.x typescript

1、搭建基本的项目环境
新建 demo目录，demo/src 用于存放源码文件，
先在demo目录下初始化 package.json

npm init -y

接着安装 node包 (用的都是本地安装方式-local install)

cnpm i -D webpack webpack-cli
cnpm i -D typescript ts-loader

用vscode打开demo文件夹

code .

src目录下新建 index.html，编写html5文档结构 快捷键 (!+tab)

image.png
image.png

2、安装及配置webpack的插件
demo目录下建立 webpack.config.js配置文件

const path = require('path');

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    }
}

package.json->scripts下增加运行脚本

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }
}

添加 tsconfig.json 配置文件（typescript的配置）
使用 tsc --init来生成 （如何不行，先全局安装typescript- cnpm i -g typescript ）

image.png

{
  "compilerOptions": {
    "target": "es5",          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "es2015",       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "allowJs": true,          /* Allow javascript files to be compiled. */
    "jsx": "react",           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "sourceMap": true,        /* Generates corresponding '.map' file. */
    "outDir": "./dist",       /* Redirect output structure to the directory. */
    "noImplicitAny": true     /* Raise error on expressions and declarations with an implied 'any' type. */    
  }
}

src/index.ts文件中写一些ts的代码

var a:string = "Hello typescript"
console.log(a)
let element=document.createElement('div')
element.innerHTML=a
document.body.appendChild(element)

安装html-webpack-plugin和clean-webpack-plugin插件

cnpm i -D html-webpack-plugin clean-webpack-plugin

image.png

webpack.config.js文件中配置插件，同时开启 source-map

const path = require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'typescript学习'
        })
    ]
}

3、现在环境已经配置完成，执行 npm run build
可以看到生成了dist目录，其下也有index.html和bundle.js文件，点击index.html也可运行

image.png

4、安装 webpack-dev-server插件
为了学习的方便（不用写了代码后每次都要手动去npm run build），安装webpack-dev-server插件

cnpm i -D webpack-dev-server

image.png

配置webpack.config.js

const path = require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{
        contentBase:path.join(__dirname, "dist"),
        //port:4090,           //指定端口号，默认是8080
        //host:'0.0.0.0',
        //hot:true               //热模块加载（其实就是我们的代码更改了，页面不用刷新就会自动加载）       
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'typescript学习'
        })
    ]
}

package.json里面添加运行脚本： "dev":"webpack-dev-server --open",

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^4.4.2",
    "typescript": "^2.9.2",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

执行 npm run dev 查看运行

5、热模块更新：
按照webpack的文档没操作成功 。
https://webpack.docschina.org/guides/hot-module-replacement/
https://www.javascriptstuff.com/webpack-hmr-tutorial/

步骤总结：

1、mkdir demo
2、cnpm i -D webpack webpack-cli
3、cnpm i -D typescript ts-loader
4、npm init -y
5、tsc --init
6、cnpm i -D webpack-dev-server
7、cnpm i -D html-webpack-plugin clean-webpack-plugin
8、新建 webpack.config.js文件 配置如下
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin');

module.exports={
    //model:'development',
    entry:'./src/index.ts',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.tsx?$/,
                use:'ts-loader',
                exclude:/node_modules/
            }
        ]
    },
    resolve:{
        //引入模块的时候可以少写后缀
        extensions:['.tsx','.ts','.js']
    },
    devtool: 'inline-source-map',
    devServer:{
        contentBase:path.join(__dirname, "dist"),
    },
    plugins:[
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'typescript学习'
        })
    ]
}

9、package.json文件中增加运行脚本
"dev":"webpack-dev-server --open",
"build":"webpack"