li5672的专栏

theme: condensed-night-purple 如何区分开发环境与生成环境 上一章讲了开发环境devtool的使用，但是官方推荐不同的环境使用不同的配置，那么怎么来区分当前运行的是什么环境呢，这次讲一下这个。 安装依赖 $ yarn add -D webpack-merge 调整目录结构 增加config文件夹，将webpack.config.js文件移动到里面，保留基础配置，删除mode和devtool属性 在config文件夹中增加webpack.conf.dev.js，写入以下内容 c.

开发环境设置 上一章 在日常开发的过程中，debug是避免不了的，我们都知道webpack是把文件打包了的，对于debug来说是非常不方便的，本章主要说一下怎么debug 准备环境 修改 webpack.config.js module.exports = { // mode: "development" } 把这行代码注释掉 新增一个ts文件 在src目录下新增一个名为Person.ts的文件，内容如下 修改index.ts文件 之前的代码全部注释或删除，新增以下内容 内容准备完成，现

静态资源的引入 上一章中已经搭建好开发环境，下面开始逐渐丰富项目的内容，本章是静态资源的引入。 安装依赖 webpack默认是只认识JavaScript的，只知道该怎么处理它，如果项目中出现了其他类型的文件，并且也希望webpack对它进行打包的时候，就要安装对应的loader了。 loader是什么，下面内容源自webpack中文网站 loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”

使用typescript与webpack搭建开发环境 项目初始化 $ yarn init -y 本文全部使用yarn命令，没有安装的可以执行下面使用npm安装 $ npm i -g yarn 安装依赖 将上面内容拷贝到项目中的package.json文件中，执行安装命令 $ yarn install 项目配置 初始化tsconfig.json $ tsc --init 如果出现tsc不是正常的命令错误提示 可在命令前面添加npx 然后在执行 执行成功之后修改tsconfig,写入以下内容