首页 › TypeScript论坛 › Typescript + TSLint + webpack 搭建 Typescript 的开发环境

祺胜 發表於 2019-8-5 14:33:00

Typescript + TSLint + webpack 搭建 Typescript 的开发环境

<div>（1）初始化项目</div>
<div>新建一个文件夹“client-side”，作为项目根目录，进入这个文件夹：</div>
<div>我们先使用 npm 初始化这个项目：</div>
<div>这时我们看到了在根目录下已经创建了一个 package.json 文件，接下来我们创建几个文件夹：</div>
<div>npm install -g tslint</div>
<div>mkdir client-side</div>
<div>cd client-side</div>
<div># 使用npm默认package.json配置</div>
<div>npm init -y</div>
<div># 或者使用交互式自行配置，遇到选项如果直接敲回车即使用括号内的值</div>
<div>npm init</div>
<div>package name: (client-side) # 可敲回车即使用client-side这个名字，也可输入其他项目名</div>
<div>version: (1.0.0) # 版本号，默认1.0.0</div>
<div>description: # 项目描述，默认为空</div>
<div>entry point: (index.js) # 入口文件，我们这里改为./src/index.ts</div>
<div>test command: # 测试指令，默认为空</div>
<div>git repository: # git仓库地址，默认为空</div>
<div>keywords: # 项目关键词，多个关键词用逗号隔开，我们这里写typescript,client,lison</div>
<div>author: # 项目作者，这里写lison&lt;lison16new@163.com&gt;</div>
<div>license: (ISC) # 项目使用的协议，默认是ISC，我这里使用MIT协议</div>
<div># 最后会列出所有配置的项以及值，如果没问题，敲回车即可。src：用来存放项目的开发资源，在 src 下创建如下文件夹：</div>
<div>&nbsp; utils：和业务相关的可复用方法</div>
<div>tools：和业务无关的纯工具函数</div>
<div>assets：图片字体等静态资源</div>
<div>api：可复用的接口请求方法</div>
<div>config：配置文件</div>
<div>&nbsp;</div>
<div>src 的同级目录：</div>
<div>typings：模块声明文件</div>
<div>build：webpack 构建配置</div>
<div>&nbsp;</div>
<div>接下来我们在全局安装 typescript ，全局安装后，你就可以在任意文件夹使用tsc命令：</div>
<div>如果全局安装失败，多数都是权限问题，要以管理员权限运行。</div>
<div>安装成功后我们进入项目根目录，使用typescript进行初始化：</div>
<div>注意：运行的指令是tsc，不是typescript。</div>
<div>这时你会发现在项目根目录多了一个 tsconfig.json 文件，里面有很多内容。而且你可能会奇怪，json 文件里怎么可</div>
<div>以使用 // 和 /**/ 注释，这个是 TS 在 1.8 版本支持的，我们后面课程讲重要更新的时候会讲到。</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>tsconfig.json 里默认有 4 项没有注释的配置，有一个需要提前讲下，就是"lib"这个配置项，他是一个数组，他用来</div>
<div>配置需要引入的声明库文件，我们后面会用到ES6语法，和DOM相关内容，所以我们需要引入两个声明库文件，需</div>
<div>要在这个数组中添加"es6"和"dom"，也就是修改数组为 [“dom”, “es6”] ，其他暂时不用修改，接着往下进行。</div>
<div>然后我们还需要在项目里安装一下typescript，因为我们要搭配使用webpack进行编译和本地开发，不是使用tsc指</div>
<div>令，所以要在项目安装一下：</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>（2））配配置置TSLint</div>
<div>接下来我们接入TSLint，如果你对代码的风格统一有要求，就需要用到TSLint了，另外TSLint会给你在很多地方起</div>
<div>到提示作用，所以还是建议加入的。接下来我们来接入它。</div>
<div>首先需要在全局安装TSLint，记着要用管理员身份运行：</div>
<div>然后在我们的项目根目录下，使用TSLint初始化我们的配置文件：</div>
<div>&nbsp;</div>
<div>npm install typescript -g</div>
<div>tsc --init</div>
<div>npm install typescript</div>
<div>npm install tslint -g</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>tslint -i运行结束之后，你会发现项目根目录下多了一个 tslint.json 文件，这个就是TSLint的配置文件了，它会根据这个</div>
<div>文件对我们的代码进行检查，生成的tslint.json文件有下面几个字段：</div>
<div>defaultSeverity是提醒级别，如果为error则会报错，如果为warning则会警告，如果设为off则关闭，那TSLint就关</div>
<div>闭了；</div>
<div>extends可指定继承指定的预设配置规则；</div>
<div>jsRules用来配置对 .js 和 .jsx 文件的校验，配置规则的方法和下面的rules一样；</div>
<div>rules是重点了，我们要让TSLint根据怎样的规则来检查代码，都是在这个里面配置，比如当我们不允许代码中使</div>
<div>用 eval 方法时，就要在这里配置 "no-eval": true ；</div>
<div>rulesDirectory可以指定规则配置文件，这里指定相对路径。</div>
<div>以上就是我们初始化的时候TSLint生成的tslint.json文件初始字段，如果你发现你生成的文件和这里看到的不一样，</div>
<div>可能是TSLint版本升级导致的，你可以参照TSLint配置说明了解他们的用途。如果你想要查看某条规则的配置及详</div>
<div>情，可以参照TSLint规则说明。</div>
<div>（3））配配置置webpack</div>
<div>接下来我们要搭配使用 webpack 进行项目的开发和打包，先来安装 webpack、webpack-cli 和 webpack-dev-</div>
<div>server：</div>
<div>我们将它们安装在项目中，并且作为开发依赖(-D)安装。接下来添加一个 webpack 配置文件，放在 build 文件夹</div>
<div>下，我们给这个文件起名 webpack.config.js，然后在 package.json 里指定启动命令：</div>
<div>这里我们用到一个插件"cross-env"，并且后面跟着一个参数 NODE_ENV=development，这个用来在</div>
<div>webpack.config.js 里通过 process.env.NODE_ENV 来获取当前是开发还是生产环境，这个插件要安装：</div>
<div>&nbsp;</div>
<div>紧接着我们要在 webpack.config.js 中书写配置：</div>
<div>{</div>
<div>"defaultSeverity": "error",</div>
<div>"extends": [</div>
<div>"tslint:recommended"</div>
<div>],</div>
<div>"jsRules": {},</div>
<div>"rules": {},</div>
<div>"rulesDirectory": []</div>
<div>}</div>
<div>npm install webpack webpack-cli webpack-dev-server -D</div>
<div>{</div>
<div>"scripts": {</div>
<div>"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"</div>
<div>}</div>
<div>}</div>
<div>npm install cross-envconst HtmlWebpackPlugin = require("html-webpack-plugin");</div>
<div>const { CleanWebpackPlugin } = require("clean-webpack-plugin");</div>
<div>module.exports = {</div>
<div>// 指定入口文件</div>
<div>// 这里我们在src文件夹下创建一个index.ts</div>
<div>entry: "./src/index.ts",</div>
<div>// 指定输出文件名</div>
<div>output: {</div>
<div>filename: "main.js"</div>
<div>},</div>
<div>resolve: {</div>
<div>// 自动解析一下拓展，当我们要引入src/index.ts的时候，只需要写src/index即可</div>
<div>// 后面我们讲TS模块解析的时候，写src也可以</div>
<div>extensions: [".tsx", ".ts", ".js"]</div>
<div>},</div>
<div>module: {</div>
<div>// 配置以.ts/.tsx结尾的文件都用ts-loader解析</div>
<div>// 这里我们用到ts-loader，所以要安装一下</div>
<div>// npm install ts-loader -D</div>
<div>rules: [</div>
<div>{</div>
<div>test: /\.tsx?$/,</div>
<div>use: "ts-loader",</div>
<div>exclude: /node_modules/</div>
<div>}</div>
<div>]</div>
<div>},</div>
<div>// 指定编译后是否生成source-map，这里判断如果是生产打包环境则不生产source-map</div>
<div>devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",</div>
<div>// 这里使用webpack-dev-server，进行本地开发调试</div>
<div>devServer: {</div>
<div>contentBase: "./dist",</div>
<div>stats: "errors-only",</div>
<div>compress: false,</div>
<div>host: "localhost",</div>
<div>port: 8089</div>
<div>},</div>
<div>// 这里用到两个插件，所以首先我们要记着安装</div>
<div>// npm install html-webpack-plugin clean-webpack-plugin -D</div>
<div>plugins: [</div>
<div>// 这里在编译之前先删除dist文件夹</div>
<div>new CleanWebpackPlugin({</div>
<div>cleanOnceBeforeBuildPatterns: ["./dist"]</div>
<div>}),</div>
<div>// 这里我们指定编译需要用模板，模板文件是./src/template/index.html，所以接下来我们要创建一个index.html文件</div>
<div>new HtmlWebpackPlugin({</div>
<div>template: "./src/template/index.html"</div>
<div>})</div>
<div>]</div>
<div>};</div>
<div>这里我们用到了两个webpack插件，第一个 clean-webpack-plugin 插件用于删除某个文件夹，我们编译项目的时</div>
<div>候需要重新清掉上次打包生成的dist文件夹，然后进行重新编译，所以需要用到这个插件将上次打包的dist文件夹清</div>
<div>掉。</div>
<div>第二个 html-webpack-plugin 插件用于指定编译的模板，这里我们指定模板为 "./src/template/index.html" 文</div>
<div>件，打包时会根据此html文件生成页面入口文件。</div>
<div>接下来我们创建这个 index.html 模板：&lt;!DOCTYPE html&gt;</div>
<div>&lt;html lang="en"&gt;</div>
<div>&lt;head&gt;</div>
<div>&lt;meta charset="UTF-8" /&gt;</div>
<div>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</div>
<div>&lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;</div>
<div>&lt;title&gt;TS-Learning&lt;/title&gt;</div>
<div>&lt;/head&gt;</div>
<div>&lt;body&gt;&lt;/body&gt;</div>
<div>&lt;/html&gt;</div>
<div>现在我们运行如下命令来启动本地服务：</div>
<div>npm run start</div>
<div>我们看到启动成功了，接下来我们在 index.ts 文件里写一点逻辑：</div>
<div>// index.ts</div>
<div>let a: number = 123;</div>
<div>const h1 = document.createElement("h1");</div>
<div>h1.innerHTML = "Hello, I am Lison";</div>
<div>document.body.appendChild(h1);</div>
<div>当我们保存代码的时候，开发服务器重新编译了代码，并且我们的浏览器也更新了。</div>
<div>我们再来配置一下打包命令，在 package.json 的 scripts 里增加 build 指令：</div>
<div>{</div>
<div>"scripts": {</div>
<div>"test": "echo \"Error: no test specified\" &amp;&amp; exit 1",</div>
<div>"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config ./build/webpack.config.js",</div>
<div>"build": "cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js"</div>
<div>}</div>
<div>}</div>
<div>同样通过 cross-env NODE_ENV=production 传入参数。现在我们运行如下命令即可执行打包：</div>
<div>npm run build</div>
<div>现在我们前端项目的搭建就大功告成了，</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>
<div>启动本地服务成功：</div>
<div><img src="https://img2018.cnblogs.com/blog/1214247/201908/1214247-20190805142559265-618248048.png"></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div><img src="https://img2018.cnblogs.com/blog/1214247/201908/1214247-20190805142638464-2027403018.png"></div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>index.ts</div>
<div>
<div class="cnblogs_code">
<pre>let a: number = <span style="color: rgba(128, 0, 128, 1)">123</span><span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">const</span> h1 = document.createElement(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
h1.innerHTML </span>= <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Hello, I am Lison</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">;
document.body.appendChild(h1);</span></pre>
</div>
<p>index.html</p>
<div class="cnblogs_code">
<pre>&lt;!DOCTYPE html&gt;
&lt;html lang=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">en</span><span style="color: rgba(128, 0, 0, 1)">"</span>&gt;

&lt;head&gt;
    &lt;meta charset=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">UTF-8</span><span style="color: rgba(128, 0, 0, 1)">"</span> /&gt;
    &lt;meta name=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">viewport</span><span style="color: rgba(128, 0, 0, 1)">"</span> content=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">width=device-width, initial-scale=1.0</span><span style="color: rgba(128, 0, 0, 1)">"</span> /&gt;
    &lt;meta http-equiv=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">X-UA-Compatible</span><span style="color: rgba(128, 0, 0, 1)">"</span> content=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ie=edge</span><span style="color: rgba(128, 0, 0, 1)">"</span> /&gt;
    &lt;title&gt;TS-Learning&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;&lt;/body&gt;

&lt;/html&gt;</pre>
</div>
<p>package.json</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">name</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">client-side1</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">version</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">1.0.0</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">description</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">""</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">main</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">./src/index.ts</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">scripts</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: {
    </span><span style="background-color: rgba(255, 255, 0, 1)"><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">test</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">echo \"Error: no test specified\" &amp;&amp; exit 1</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">start</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">build</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">cross-env NODE_ENV=production webpack --mode=production --config ./build/webpack.config.js</span><span style="color: rgba(128, 0, 0, 1)">"</span></span><span style="color: rgba(0, 0, 0, 1)">
},
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">author</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">zxw</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">license</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ISC</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">dependencies</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: {
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">cross-env</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^5.2.0</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">typescript</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^3.5.3</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
},
</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">devDependencies</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">: {
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">clean-webpack-plugin</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^3.0.0</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">html-webpack-plugin</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^3.2.0</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ts-loader</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^6.0.4</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">webpack</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^4.39.1</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">webpack-cli</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^3.3.6</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">webpack-dev-server</span><span style="color: rgba(128, 0, 0, 1)">"</span>: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">^3.7.2</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p>&nbsp;</p>
<p>webpack.config.js</p>
<p>&nbsp;</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">const</span> HtmlWebpackPlugin = require(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">html-webpack-plugin</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">const</span> { CleanWebpackPlugin } = require(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">clean-webpack-plugin</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">);
module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 指定入口文件 </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里我们在src文件夹下创建一个index.ts </span>
    entry: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">./src/index.ts</span><span style="color: rgba(128, 0, 0, 1)">"</span>, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 指定输出文件名 </span>
    output: { filename: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">main.js</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> },
    resolve: {
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 自动解析一下拓展，当我们要引入src/index.ts的时候，只需要写src/index即可
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 后面我们讲TS模块解析的时候，写src也可以 </span>
      extensions: [<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.tsx</span><span style="color: rgba(128, 0, 0, 1)">"</span>, <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.ts</span><span style="color: rgba(128, 0, 0, 1)">"</span>, <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.js</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">]
    },
    module: {
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 配置以.ts/.tsx结尾的文件都用ts-loader解析 </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里我们用到ts-loader，所以要安装一下
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> npm install ts-loader -D </span>
      rules: [{ test: /\.tsx?$/, use: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ts-loader</span><span style="color: rgba(128, 0, 0, 1)">"</span>, exclude: /node_modules/<span style="color: rgba(0, 0, 0, 1)"> }
      ]
    },
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 指定编译后是否生成source-map，这里判断如果是生产打包环境则不生产source-map devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map", </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里使用webpack-dev-server，进行本地开发调试 </span>
    devServer: { contentBase: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">./dist</span><span style="color: rgba(128, 0, 0, 1)">"</span>, stats: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">errors-only</span><span style="color: rgba(128, 0, 0, 1)">"</span>, compress: <span style="color: rgba(0, 0, 255, 1)">false</span>, host: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">localhost</span><span style="color: rgba(128, 0, 0, 1)">"</span>, port: <span style="color: rgba(128, 0, 128, 1)">8089</span><span style="color: rgba(0, 0, 0, 1)"> },
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里用到两个插件，所以首先我们要记着安装
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> npm install html-webpack-plugin clean-webpack-plugin -D </span>
<span style="color: rgba(0, 0, 0, 1)">    plugins: [
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里在编译之前先删除dist文件夹 </span>
      <span style="color: rgba(0, 0, 255, 1)">new</span> CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">./dist</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">] }),
      </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里我们指定编译需要用模板，模板文件是./src/template/index.html，所以接下来我们要创建一个index.html文件 </span>
      <span style="color: rgba(0, 0, 255, 1)">new</span> HtmlWebpackPlugin({ template: <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">./src/template/index.html</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> })]

};</span></pre>
</div>
<p>项目的总体目录：</p>
<p><img src="https://img2018.cnblogs.com/blog/1214247/201908/1214247-20190805142927119-203905208.png"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>仓库：</p>
<div class="cnblogs_code">
<pre>https:<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">gitee.com/guangzhou110/lingjichuxuetoutypescript.git</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
<div>&nbsp;</div>
<div>&nbsp;</div>

</div>
<div id="MySignature" role="contentinfo">
    越努力越幸运<br><br>
来源：https://www.cnblogs.com/guangzhou11/p/11302830.html

查看完整版本: Typescript + TSLint + webpack 搭建 Typescript 的开发环境