Webpack搭建完整Typescript开发环境
前言
IDE提供了强大的纠错与补全能力，但是对于从开发时的编程语言实时转译，提供开发本地服务器以及自动刷新，到转为生产环境代码的编译，压缩，混淆代码以及打包，还是交给一些第三方工具的吧，对，我说的就是Typescript代替Javascript进行前端开发，第三方工具就说的是神器webpack。
在此记录一下，下一次直接复制粘贴 :-p
需求
开发环境
- 即时编译为js，并自动刷新页面
生产环境
- 将es6/es7转为es5
- 混淆并压缩转译完的js代码
环境搭建
cd dir>
npm init 目录如下
<your-dev-dir>
├── dist // 生产环境的js代码输出文件夹
│ └── index.html // html 页面
├── .babelrc // babel 配置文件
├── package-lock.json
├── package.json
├── src
│ └── typescript
│ ├── main.ts // typescript入口文件
│ ├── ....... // 其他ts文件或模块
├── tsconfig.json // typescript配置文件，IDE会读取
├── webpack.common.js // wepack通用配置文件
├── webpack.dev.js // webpack开发环境配置文件
└── webpack.prod.js // webpack生产环境配置文件安装依赖
npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglifyjs-webpack-plugin webpack webpack-dev-server webpack-merge注：目前babel官方推荐使用 babel-preset-env，而不是 babel-preset-201x 了
文件填写
> dist/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Titletitle>
head>
<body>
<script src="bundle.min.js">script>
body>
html>> package.json
// ...
{
"scripts": {
// 启动开发环境
"dev": "webpack-dev-server --client-log-level none --color --inline --hot --config webpack.dev.js",
// 启动生产环境
"build": "webpack --config webpack.prod.js --progress --color"
},
// ...
}> tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"allowJs": true,
"module": "commonjs",
"removeComments": true,
// 可以使用 Promise, async, await等新语法
"target": "es2017"
}
}> .babelrc
这里完全复制粘贴官方示例代码，详见官网
{ "presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
] }> webpack.common.js
必须添加 babel-polyfill， 否则生产环境转es5会出错
const path = require('path');
module.exports = {
entry: ['babel-polyfill', './src/typescript/main.ts'],
resolve:
{
extensions: ['.ts', '.js', '.json']
},
};> webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
// 引入通用webpack配置文件
const common = require('./webpack.common.js');
module.exports = merge(common, {
module: {
rules:
[
{
test: /\.tsx?$/,
loader: 'ts-loader'
},
]
},
// 使用 source-map
devtool: 'source-map',
// 对 webpack-dev-server 进行配置
devServer: {
contentBase: './dist',
// 设置localhost端口
port: 9000,
// 自动打开浏览器
open: true,
},
plugins: [
],
// 设置出口文件地址与文件名
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.min.js'
},
});> webpack.prod.js
const path = require('path');
const merge = require('webpack-merge');
// 引入通用webpack配置文件
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// 对js代码进行混淆压缩的插件
const uglifyJSPlugin = new UglifyJSPlugin();
// 对babel的配置，内容同.babelrc文件
const babelOptions = {
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
module.exports = merge(common, {
module: {
rules: [{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: babelOptions
},
{
loader: 'ts-loader'
}
]
}]},
devtool: 'cheap-module-source-map',
plugins: [
uglifyJSPlugin,
],
// 设置出口文件地址与文件名
output: {
path: path.resolve('dist'),
filename: 'bundle.min.js'
},
});大功告成
进行开发！
npm run dev开发完成，获取最终文件
npm run build注：先停止第一个命令