webpack开发从0到1搭建与打包（TypeScript）

最新推荐文章于 2022-10-16 16:50:13 发布

_Zou

最新推荐文章于 2022-10-16 16:50:13 发布

阅读量159

点赞数

zouzouzou

本文链接：https://blog.csdn.net/weixin_40676050/article/details/108555319

版权

前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Webpack开发从0到1搭建与打包（TypeScript）

1.yarn安装

安装Node->npm->cnpm->yarn(网上非常多教程)

2.项目搭建初始化

新建文件夹webpackZou,终端进入文件夹；

初始化package.json: npm init -p;

装载webpack\webpack-cli: yarn add webpack webpack-cli --dev;

3.安装依赖package.json

{
  "dependencies": {
    "express": "^4.17.1",
    "file-loader": "^6.0.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.161",
    "css-loader": "^4.2.2",
    "lodash": "^4.17.20",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.3",
    "typescript": "^4.0.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.0"
  },
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js",
    "watch": "webpack --watch",
    "server": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "keywords": []
}

4. webpack.config.js

const path = require("path");

module.exports = {

mode: "development", //开发环境

//webpack

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

//typeScript

entry: {

    app: "./src/index.ts", //入口

    // print: "./src/print.ts",

},

devtool: "inline-source-map", //映射到源码位置

module: {

    rules: [

      {

        test: /\.tsx?$/,

        use: "ts-loader",

        exclude: /node_modules/,

      },

      {

        test: /\.css$/,

        use: ["style-loader", "css-loader"],

      },

      {

        test: /\.(png|svg|jpg|gif)$/,

        use: ["file-loader"],

      },

    ],

},

resolve: {

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

},

output: {

    filename: "[name].bundle.js", //输出

    path: path.resolve(__dirname, "dist"),

    publicPath: "", //webpack-dev-middleware设置，yarn server//本示例只是运行3000端口一下

},

//dev-server

devServer: {

    contentBase: path.join(__dirname, "dist"),

    port: 7000,

    // host:'0.0.0.0'//主机号

    historyApiFallback: {

      //无效地址

      rewrites: [{ from: /./, to: "/404.html" }],

    },

    watchOptions: {

      //监听文件改动

      aggregateTimeout: 800,

      poll: 1000,

      ignored: /node_modules/,

    },

    hot: true, //热刷新

},

};

5. typeScript简易搭建

{

"compilerOptions": {

    "outDir": "./dist/",

    "noImplicitAny": true,

    "module": "es6",

    "target": "es5",

    "jsx": "react",

    "allowJs": true,

    "sourceMap": true,

    "allowSyntheticDefaultImports": true,

    "esModuleInterop": true,

}

}