webpack创建TypeScript项目

webpack官方文档...

一、新建文件目录

1、/src文件
2、npm init -y（初始化packjson.json文件）
3、npm i --save-dev webpack 安装webpack

二、安装webpack依赖包

1、npm i webpack -g 保存webpack到全局npm
2、npm i webpack-cli -g保存webpack-cli到全局

三、新建/配置webpack.config.js文件

const path = require('path');  //nodejs内置模块
module.exports = {
  /**
   * 入口
   */
  entry: './src/index.js',
  /**
   * 出口
   */
  output: {
    path: path.resolve(__dirname, 'dist'),  
    filename: 'bundle.js'   
  },
}

四、package.json配置运行打包

1、安装
npm i -S webpack-dev-server
2、配置
"build": ".\\node_modules\\.bin\\webpack --mode development",
"serve": ".\\node_modules\\.bin\\webpack-dev-server"
3、执行
打包：npm run build
运行：npm run serve

五、运行html项目需要配置

1、babel-loader

用来处理ES6语法，将其编译为浏览器可以执行的js语法。

• 安装

webpack 3.x | babel-loader 8.x | babel 7.x

npm install [email protected] @babel/core @babel/preset-env webpack

• 配置

在 webpack 配置对象中，需要添加 babel-loader 到 module 的 loaders 列表中

webpack.config.js 文件配置（规则）

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

2、HtmlWebpackPlugin安装（简化了HTML文件的创建，为webpack包提供服务）

• 安装
  npm install --save-dev html-webpack-plugin

• 配置webpack.config.js 文件配置（规则）

plugins: [new HtmlWebpackPlugin({
    filename: 'index.html',
    template: __dirname + "/public/index.html"
})]

• 修改后每次打包才能运行

六、loader安装

loader：文件预处理器，通俗点就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

loader 文档...

1、css

• 安装
  npm install --save-dev css-loader
npm install style-loader --save-dev

• 配置webpack.config.js 文件配置（规则）

{
  test: /\.css$/,
  use: [
      { loader: "style-loader" },
      { loader: "css-loader" }
  ]
}

其他loader同理

七、本地服务-->开发中 Server(devServer)

浏览器解析为location：8080（实时缓存执行）

• 安装
  npm install webpack-dev-server --save-dev

• 配置webpack.config.js

  /**
   * 本地服务
   */
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8080, //端口号
    historyApiFallback: true, //不跳转
    inline: true //实时刷新
  },

八、使用typescript

TypeScript 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。

webpack中typescript使用...

• 安装
  npm install --save-dev typescript ts-loader

• 新建文件

  tsconfig.json

• 配置 tsconfig.json文件

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

• 配置webpack.config.js

将 webpack 的入口起点指定为 ./index.ts，然后通过 ts-loader 加载所有的 .ts 和 .tsx 文件，并且在当前目录输出一个 bundle.js 文件。

entry: './src/index.ts',
resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },