Skip to content

Commit df0470f

Browse files
xudafengxudafeng
authored
chore: update webpack loader (#28)
1 parent 198250d commit df0470f

File tree

13 files changed

+131
-39
lines changed

13 files changed

+131
-39
lines changed

‎antd-sample/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@
88
<body>
99
<div id="app">
1010
<script>
11+
var head = document.getElementsByTagName('head')[0];
1112
var isOnline = !!~location.host.indexOf('github');
13+
var chunkName = location.pathname.replace(/\/+/g, '');
1214
var script = document.createElement('script');
1315
script.type = 'text/javascript';
14-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/antd-sample.js';
15-
var head = document.getElementsByTagName('head')[0];
16+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1617
head.appendChild(script);
18+
var style = document.createElement('link');
19+
style.rel = 'stylesheet';
20+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
21+
head.appendChild(style);
1722
</script>
1823
</div>
1924
</body>

‎app-bootstrap/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@
88
<body>
99
<div id="app">
1010
<script>
11+
var head = document.getElementsByTagName('head')[0];
1112
var isOnline = !!~location.host.indexOf('github');
13+
var chunkName = location.pathname.replace(/\/+/g, '');
1214
var script = document.createElement('script');
1315
script.type = 'text/javascript';
14-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/app-bootstrap.js';
15-
var head = document.getElementsByTagName('head')[0];
16+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1617
head.appendChild(script);
18+
var style = document.createElement('link');
19+
style.rel = 'stylesheet';
20+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
21+
head.appendChild(style);
1722
</script>
1823
</div>
1924
</body>

‎flux/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/flux.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎mobx/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/mobx.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎package.json

+2-3
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"babel-plugin-istanbul": "^4.1.5",
5252
"classnames": "^2.2.5",
5353
"cross-env": "^5.1.1",
54-
"css-loader": "^0.28.8",
54+
"css-loader": "^6.7.1",
5555
"datahub-proxy-middleware": "4",
5656
"eslint": "^4.10.0",
5757
"eslint-config-standard": "^11.0.0-beta.0",
@@ -78,10 +78,10 @@
7878
"macaca-electron": "13",
7979
"macaca-wd": "3",
8080
"marked": "^0.3.4",
81+
"mini-css-extract-plugin": "^2.6.0",
8182
"mobx": "^3.4.1",
8283
"mobx-react": "^4.3.5",
8384
"mocha-webpack": "^1.1.0",
84-
"postcss-loader": "^2.0.10",
8585
"prop-types": "^15.6.0",
8686
"react": "^16.2.0",
8787
"react-dom": "^16.2.0",
@@ -92,7 +92,6 @@
9292
"redux-devtools": "3",
9393
"redux-saga": "^1.1.3",
9494
"reliable-cli": "1",
95-
"style-loader": "^0.19.1",
9695
"stylelint": "^8.4.0",
9796
"ts-loader": "^4.3.1",
9897
"tslint": "^5.9.1",

‎react-router/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/react-router.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎redux-saga/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/redux-saga.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎redux/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/redux.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎unstated/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/unstated.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎vue-plain/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/vue-plain.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎vuex-ts/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/vuex-ts.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎vuex/index.html

+7-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,17 @@
99
<body>
1010
<div id="app">
1111
<script>
12+
var head = document.getElementsByTagName('head')[0];
1213
var isOnline = !!~location.host.indexOf('github');
14+
var chunkName = location.pathname.replace(/\/+/g, '');
1315
var script = document.createElement('script');
1416
script.type = 'text/javascript';
15-
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/vuex.js';
16-
var head = document.getElementsByTagName('head')[0];
17+
script.src = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.js';
1718
head.appendChild(script);
19+
var style = document.createElement('link');
20+
style.rel = 'stylesheet';
21+
style.href = (isOnline ? '//unpkg.com/web-app-bootstrap@latest' : '..') + '/dist/' + chunkName + '.css';
22+
head.appendChild(style);
1823
</script>
1924
</div>
2025
</body>

‎webpack.config.js

+52-14
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
'use strict';
22

33
const path = require('path');
4-
const VueLoaderPlugin = require('vue-loader/lib/plugin');
54
const DataHub = require('macaca-datahub');
5+
const VueLoaderPlugin = require('vue-loader/lib/plugin');
6+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
67
const datahubMiddleware = require('datahub-proxy-middleware');
78

89
const datahubConfig = {
@@ -89,31 +90,64 @@ const config = {
8990
exclude: /node_modules/
9091
}, {
9192
test: /\.less$/,
93+
exclude(filePath) {
94+
return filePath.endsWith('.module.less');
95+
},
9296
use: [
9397
{
94-
loader: 'style-loader'
98+
loader: MiniCssExtractPlugin.loader,
9599
},
96100
{
97-
loader: 'css-loader'
101+
loader: 'css-loader',
102+
},
103+
{
104+
loader: 'less-loader',
105+
options: {
106+
lessOptions: {
107+
javascriptEnabled: true,
108+
math: 'always',
109+
},
110+
},
98111
},
112+
],
113+
},
114+
{
115+
test: /\.module\.less$/,
116+
use: [
99117
{
100-
loader: 'less-loader'
118+
loader: MiniCssExtractPlugin.loader,
101119
},
102120
{
103-
loader: 'postcss-loader'
104-
}
105-
]
106-
}, {
107-
test: /\.css$/,
121+
loader: 'css-loader',
122+
options: {
123+
modules: {
124+
auto: true,
125+
localIdentName: '[name]_[local]_[hash:base64:5]',
126+
},
127+
},
128+
},
129+
{
130+
loader: 'less-loader',
131+
options: {
132+
lessOptions: {
133+
javascriptEnabled: true,
134+
math: 'always',
135+
},
136+
},
137+
},
138+
],
139+
},
140+
{
141+
test: /.css$/,
108142
use: [
109143
{
110-
loader: 'style-loader'
144+
loader: MiniCssExtractPlugin.loader,
111145
},
112146
{
113-
loader: 'css-loader'
114-
}
115-
]
116-
}
147+
loader: 'css-loader',
148+
},
149+
],
150+
},
117151
]
118152
},
119153
resolve: {
@@ -123,6 +157,10 @@ const config = {
123157
}
124158
},
125159
plugins: [
160+
new MiniCssExtractPlugin({
161+
filename: '[name].css',
162+
chunkFilename: '[name].css',
163+
}),
126164
new VueLoaderPlugin()
127165
],
128166
devServer: {

0 commit comments

Comments
 (0)