diff --git a/package.json b/package.json
index 22a7745..9268f5c 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"qrcode-npm": "0.0.3",
"request": "^2.74.0",
"stream-throttle": "^0.1.3",
+ "svg-inline-react": "^1.0.2",
"whatwg-fetch": "^1.0.0",
"ws": "^2.2.0"
},
@@ -60,7 +61,7 @@
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.4.0",
- "extract-text-webpack-plugin": "^1.0.1",
+ "extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^0.9.0",
"https-proxy-agent": "^1.0.0",
"jasmine": "^2.5.3",
@@ -88,9 +89,8 @@
"stream-equal": "0.1.8",
"style-loader": "^0.13.1",
"svg-inline-loader": "^0.7.1",
- "svg-inline-react": "^1.0.2",
"url-loader": "^0.5.7",
- "webpack": "^1.12.9",
+ "webpack": "^3.10.0",
"worker-loader": "^0.7.1"
},
"scripts": {
@@ -99,8 +99,8 @@
"lint": "eslint .",
"testserver": "node test/server/startServer.js",
"testOutWeb": "jasmine test/spec_outweb/test_realweb_spec.js",
- "buildweb": "NODE_ENV=production webpack --config web/webpack.config.js --process --colors",
- "webserver": "NODE_ENV=test webpack --config web/webpack.config.js --process --colors --watch",
+ "buildweb": "NODE_ENV=production webpack --config web/webpack.config.js --colors",
+ "webserver": "NODE_ENV=test webpack --config web/webpack.config.js --colors --watch",
"doc:serve": "node build_scripts/prebuild-doc.js && gitbook serve ./docs-src ./docs --log debug",
"doc:build": "./build_scripts/build-doc-site.sh"
},
diff --git a/web/postcss.config.js b/web/postcss.config.js
new file mode 100644
index 0000000..afeb286
--- /dev/null
+++ b/web/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: [
+ require('autoprefixer')
+ ]
+}
\ No newline at end of file
diff --git a/web/src/component/header-menu.jsx b/web/src/component/header-menu.jsx
index 32e5541..ad41b59 100644
--- a/web/src/component/header-menu.jsx
+++ b/web/src/component/header-menu.jsx
@@ -208,7 +208,7 @@ class HeaderMenu extends React.Component {
onClick={this.stopRecording}
>
<div className={Style.filterIcon}>
- <InlineSVG src={require('svg-inline!assets/stop.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/stop.svg')} />
</div>
<span>Stop</span>
</a>
@@ -221,7 +221,7 @@ class HeaderMenu extends React.Component {
onClick={this.resumeRecording}
>
<div className={Style.stopIcon}>
- <InlineSVG src={require('svg-inline!assets/play.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/play.svg')} />
</div>
<span>Resume</span>
</a>
@@ -234,7 +234,7 @@ class HeaderMenu extends React.Component {
onClick={this.showFilter}
>
<div className={Style.stopIcon}>
- <InlineSVG src={require('svg-inline!assets/filter.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/filter.svg')} />
</div>
<span>Filter</span>
</a>
@@ -250,7 +250,7 @@ class HeaderMenu extends React.Component {
onClick={this.clearAllRecord}
title="Ctrl + X"
>
- <InlineSVG src={require('svg-inline!assets/clear.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/clear.svg')} />
<span>Clear</span>
</a>
{inAppMode ? filterMenu : null}
@@ -269,7 +269,7 @@ class HeaderMenu extends React.Component {
href="javascript:void(0)"
>
<div className={Style.tipIcon} >
- <InlineSVG src={require('svg-inline!assets/tip.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/tip.svg')} />
</div>
<span>Proxy Info</span>
</a>
diff --git a/web/src/component/left-menu.jsx b/web/src/component/left-menu.jsx
index 88faf0b..14edc6d 100644
--- a/web/src/component/left-menu.jsx
+++ b/web/src/component/left-menu.jsx
@@ -93,7 +93,7 @@ class LeftMenu extends React.Component {
title="Only show the filtered result"
>
<span className={Style.filterIcon}>
- <InlineSVG src={require('svg-inline!assets/filter.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/filter.svg')} />
</span>
<span>Filter</span>
</a>
@@ -105,7 +105,7 @@ class LeftMenu extends React.Component {
title="Download the root CA to the computer and your phone"
>
<span className={Style.downloadIcon}>
- <InlineSVG src={require('svg-inline!assets/download.svg')} />
+ <InlineSVG src={require('svg-inline-loader!assets/download.svg')} />
</span>
<span>RootCA</span>
</a>
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 3b301f2..57fc0f2 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -3,6 +3,8 @@ const path = require('path');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
+
const extractCss = new ExtractTextPlugin('[name].css', {
disable: false,
allChunks: true
@@ -22,73 +24,91 @@ module.exports = {
filename: 'main.js'
},
resolve: {
- root: path.join(__dirname, 'src'),
- extensions: ['', '.js', '.jsx']
+ modules: [
+ 'node_modules',
+ path.join(__dirname, 'src')
+ ],
+ extensions: ['.', '.js', '.jsx']
},
module: {
- loaders: [{
+ rules: [{
test: /\.js$/,
exclude: /node_modules/,
- loader: 'babel',
- query: {
+ loader: 'babel-loader',
+ options: {
presets: ['es2015', 'stage-0']
}
},
{
test: /\.jsx$/,
exclude: /node_modules/,
- loader: 'babel',
- query: {
- presets: ['es2015', 'stage-0', 'react'],
- plugins: ['transform-runtime', ['import', { libraryName: 'antd', style: true }]]
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['es2015', 'stage-0', 'react'],
+ plugins: [['import', { libraryName: 'antd', style: true }]]
+ }
}
},
{
test: function (filePath) {
return (/antd\/.*\.less$/.test(filePath) || /\.global\.less$/.test(filePath));
},
- loader: ExtractTextPlugin.extract('css!postcss!less')
+ use: ExtractTextPlugin.extract({use: 'css-loader!postcss-loader!less-loader'})
},
{
test: function (filePath) {
return (/\.less$/.test(filePath) && !/\.global\.less$/.test(filePath) && !/antd\/.*\.less$/.test(filePath));
},
- loader: ExtractTextPlugin.extract('css?modules&localIdentName=[local]___[hash:base64:5]!postcss!less')
+ use: ExtractTextPlugin.extract({use: 'css-loader?modules&localIdentName=[local]___[hash:base64:5]!postcss-loader!less-loader'})
},
{
test: /\.css$/,
- loader: ExtractTextPlugin.extract('css')
+ use: ExtractTextPlugin.extract({use:'css-loader'})
},
{
test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&mimetype=image/png'
+ use: {
+ loader: 'url-loader?limit=10000&mimetype=image/png'
+ }
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&mimetype=application/font-woff'
+ use: {
+ loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+ }
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&mimetype=application/font-woff'
+ use: {
+ loader: 'url-loader?limit=10000&mimetype=application/font-woff'
+ }
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&mimetype=application/octet-stream'
+ use: {
+ loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
+ }
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&mimetype=application/octet-stream'
+ use: {
+ loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
+ }
},
{
test: /font\.svg(\?v=\d+\.\d+\.\d+)?$/,
- loader: 'url?limit=10000&mimetype=image/svg+xml'
+ use: {
+ loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
+ }
}]
},
- postcss: function () {
- return [autoprefixer];
- },
plugins: [
extractCss,
- defineProperty
- ]
+ defineProperty,
+ new UglifyJsPlugin()
+ ],
+ stats: {
+ children: false
+ }
};