Webpack4 使用

注意： 本次使用的 webpack 版本

github地址

"devDependencies": {
    "ts-loader": "^5.4.5",
    "typescript": "^3.4.5",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }

目标

使用 webpack 配合 ts-loader 对 ts 文件编译打包

准备工作

• 安装webpack
• 安装webpack-cli
• 安装webpack-dev-server
• 安装typescript
• 安装ts-loader
• 配置tsconfig.json
• 配置webpack.config.js

安装工具

webpack

npm install --save-dev webpack

webpack-cli

npm install --save-dev webpack-cli

typescript

npm i --save-dev typescript

ts-loader

npm i --save-dev ts-loader

配置项

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true
  },
  "include": ["./app/*"],
  "exclude": ["./node_modules"]
}

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^5.4.5",
    "typescript": "^3.4.5",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {}
}

webpack.config.js

module.exports = {
  devtool: "eval-source-map",
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./public",
    historyApiFallback: true,
    inline: true
  },
  module: {
    rules: [{ test: /\.ts$/, use: "ts-loader" }]
  }
};

把node_modules忽略掉

.gitignore

node_modules

使用 webpack 构建本地服务器

想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实 Webpack 提供一个可选的本地开发服务器，这个本地服务器基于 node.js 构建，可以实现你想要的这些功能，不过它是一个单独的组件，在 webpack 中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

配置ts-loader

配置 ts 支持

踩过的坑

提示需要安装webpack-cli

webpack4 中 cli 与 webpack 分开了 需要分别安装，详情请参考：提示需要安装 webpack-cli

配置ts中 遇到不能resolve 问题

webpack配置ts

参考文章

• webpack教程
• webpack 中文网
• 入门 Webpack，看这篇就够了