React使用TypeScript的WebPack完整配置文件

webpack配置文件

webpack.dll.config.js

提前打包好第三方库, 可放在部署期和开发期重复打包第三方库, 缩短部署期和开发期的编译时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 生成 other文件插件
const theme = require('./src/theme.json');

module.exports = {
entry: {
'libs': [
"antd",
"copy-to-clipboard",
"crypto-browserify",
"crypto-js",
"dompurify",
"echarts",
"edsp-ui",
"element-resize-event",
"g2",
"g2-react",
"immutable",
"isomorphic-fetch",
"jsondiffpatch-for-react",
"jwt-decode",
"lodash",
"prop-types",
"pubsub-js",
"react",
"react-addons-perf",
"react-addons-shallow-compare",
"react-codemirror",
"react-dnd",
"react-dnd-html5-backend",
"react-dom",
"react-graph-vis",
"react-json-syntax-highlighter",
"react-lz-editor",
"react-router",
"react-router-dom",
"react-sortablejs",
"react-split-pane",
"screenfull",
"socket.io-client",
"sortablejs"
]
},
module: {
//加载器配置
rules: [{
test: /\.js$/,
include: [path.resolve(__dirname, 'src')],
loader: 'babel-loader',
exclude: path.join(__dirname, 'node_modules')
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", {
loader: "less-loader",
options: {
modifyVars: theme
}
}]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [{
loader: "url-loader",
options: {
limit: 8192,
name: "../images/[name].[ext]"
}
}]
},
{
test: /\.(otf|eot|svg|ttf|woff)\??/,
use: [{
loader: "url-loader",
options: {
limit: 8192,
name: "../fonts/[name].[ext]"
}
}]
}]
},
resolve: {
extensions: ['.js', '.json', '.less', '.css'],
},
output: {
path: path.join(__dirname, 'vendor', 'js'),
filename: "[name].js",
library: "[name]",

},
plugins: [
new webpack.DllPlugin({
context: __dirname,
path: path.join(__dirname, "vendor", "manifest.json"),
name: "[name]"
}),
new ExtractTextPlugin({
filename: "../style/[name].css",
allChunks: true
})]
};

webpack.deploy.config.js

部署期使用的webpack配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
const path = require('path');
const webpack = require('webpack'); // 导入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html插件
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷贝文件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 生成 other文件插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除deploy
const { CheckerPlugin } = require('awesome-typescript-loader');
const theme = require('./src/theme.json');

module.exports = {
entry: {
// 入口点文件
app: ['index.tsx']
},
output: {
// 输出点
path: path.resolve(__dirname, 'deploy', 'js'),
filename: `[name].js`,
chunkFilename: '[name].js?[chunkhash]',
publicPath: './js/'
},
plugins: [
new CheckerPlugin(),
new CleanWebpackPlugin(
'deploy/**/*', // 匹配删除的文件
{
root: __dirname, // 根目录
verbose: true, // 开启在控制台输出信息
dry: false // 启用删除文件
}
),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor/manifest.json'),
name: 'libs'
}),
// 根据模板插入css/js等生成最终HTML
new HtmlWebpackPlugin({
filename: '../index.html', // 生成的html存放路径,相对于 path
template: path.resolve(__dirname, 'src', 'tmp.html'), // html模板路径,相对于webpack.config
inject: true, // 允许插件修改哪些内容,包括head与body
hash: true, // 为静态资源生成hash值
minify: {
// 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: false // 删除空白符与换行符
}
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'src/fonts/'),
to: path.resolve(__dirname, 'deploy/fonts/')
},
{
from: path.resolve(__dirname, 'src/iconfont/'),
to: path.resolve(__dirname, 'deploy/iconfont/')
},
{
from: path.resolve(__dirname, 'vendor/'),
to: path.resolve(__dirname, 'deploy/vendor/')
}
]),
new ExtractTextPlugin({
filename: '../style/[name].css',
allChunks: true
})
],
module: {
// 加载器配置
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
include: [path.resolve(__dirname, 'node_modules', '*')]
},
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
include: [path.resolve(__dirname, 'src')]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '../images/[name].[ext]',
publicPath: '../images/'
}
}
]
},
{
test: /\.(otf|eot|svg|ttf|woff)\??/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: '../font/[name].[ext]',
publicPath: '../font/'
}
}
]
}
]
},
// 解析
resolve: {
// 绝对路径, 查找module的话从这里开始查找(可选)
modules: [path.join(__dirname, 'src'), 'node_modules'],
// 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: ['.ts', '.tsx', '.jsx', '.js', '.json', '.less', '.css'],
// 别名配置
alias: {
edspUI: 'edsp-ui',
Utils: 'utils',
Service: 'services',
Controls: 'Controls.json'
}
}
};

webpack.dev.config.js

开发期使用的webpack配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
const path = require('path');
const webpack = require('webpack'); // 导入webpack模块
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 拷贝文件
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 生成 other 文件插件
const theme = require('./src/theme.json');
const { CheckerPlugin } = require('awesome-typescript-loader');
// 版本
const version = require('./src/Controls.json').version;
// 代理
const proxyJson = require('./src/proxy.json');
const devServerProxy = {};
proxyJson.forEach(function(item) {
let proxyUrl = '';
if (item.proxyUrl == '/loader' || item.notVersion) {
// 不需要带版本号
// 壳子服务不需要版本
proxyUrl = item.proxyUrl;
} else {
proxyUrl = item.proxyUrl + '/' + version;
}
devServerProxy[proxyUrl] = {
target: item.targetApi
};
devServerProxy[proxyUrl]['pathRewrite'] = {};
devServerProxy[proxyUrl]['pathRewrite'][proxyUrl] = '';
});

module.exports = {
devtool: 'source-map',
entry: {
// 入口点文件
app: ['index.tsx']
},
output: {
// 输出点
path: path.resolve(__dirname, 'ui'),
filename: `./js/[name].js`,
publicPath: '/'
},
plugins: [
new CheckerPlugin(),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor/manifest.json'),
name: 'libs'
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'src/fonts/'),
to: './fonts/'
},
{
from: path.resolve(__dirname, 'src/iconfont/'),
to: './iconfont/'
},
{
from: path.resolve(__dirname, 'vendor/'),
to: './'
}
]),
new ExtractTextPlugin({
filename: './style/[name].css',
allChunks: true
})
],
module: {
// 加载器配置
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
include: [path.resolve(__dirname, 'node_modules', '*')]
},
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
include: [path.resolve(__dirname, 'src')]
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'less-loader',
options: {
modifyVars: theme
}
}
]
})
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: './images/[name].[ext]'
}
}
]
},
{
test: /\.(otf|eot|svg|ttf|woff)\??/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: './font/[name].[ext]'
}
}
]
}
]
},
// 其它解决方案配置
resolve: {
// 绝对路径, 查找module的话从这里开始查找(可选)
modules: [path.join(__dirname, 'src'), 'node_modules'],
// 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
extensions: ['.ts', '.tsx', '.jsx', '.js', '.json', '.less', '.css'],
// 别名配置
alias: {
edspUI: 'edsp-ui',
Utils: 'utils',
Service: 'services',
Controls: 'Controls.json'
}
},
devServer: {
contentBase: path.join(__dirname, 'ui'),
inline: false,
host: '0.0.0.0',
port: 8889,
disableHostCheck: true,
historyApiFallback: true,
proxy: devServerProxy
}
};

参考

Webpack官方文档
Webpack中文文档

显示 Gitment 评论