Skip to content

Commit 8f4bd14

Browse files
author
Shawn Wang
committed
add webpack dll
update build tools
1 parent 6fb53a7 commit 8f4bd14

26 files changed

+868
-291
lines changed

‎build/run/dev-server.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
const { exec } = require('child_process')
22
const chalk = require('chalk')
33
const path = require('path')
4-
const projectPath = __dirname.replace(`build${path.sep}run`, '')
4+
const projectPath = process.cwd()
55
let port = process.env.port || 9000
66
const webpackDevServerPath = path.join(projectPath, 'node_modules/.bin/webpack-dev-server')
77
const webpackConfigPath = path.join(projectPath, 'build/webpack.config.js')
88

9-
function run () {
10-
const buildCommand = `${webpackDevServerPath} --config ${webpackConfigPath} --color`
9+
function run() {
10+
const buildCommand = `${webpackDevServerPath} --config ${webpackConfigPath} --color --progress`
1111
console.log(chalk.blue(buildCommand))
1212
const child = exec(buildCommand, {
13+
maxBuffer: 2 * 1024 * 1024,
1314
env: {
1415
port,
1516
},
@@ -24,9 +25,7 @@ function run () {
2425
console.error(error.message)
2526
}
2627
})
27-
child.stdout.on('data', (chunk) => {
28-
console.log(chunk.toString())
29-
})
28+
child.stdout.pipe(process.stdout)
3029
}
3130

3231
run()

‎build/run/production.js‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
11
const { exec } = require('child_process')
22
const path = require('path')
3-
const fs = require('fs')
4-
const fsUtils = require('nodejs-fs-utils')
53
const chalk = require('chalk')
6-
const projectPath = __dirname.replace(`build${path.sep}run`, '')
4+
const projectPath = process.cwd()
75
const distDirPath = path.join(projectPath, 'dist')
86
const webpackPath = path.join(projectPath, 'node_modules/.bin/webpack')
97
const webpackConfigPath = path.join(projectPath, 'build/webpack.config.js')
108

11-
function run () {
12-
console.log(chalk.red(`remove dir: ${distDirPath}`))
13-
fsUtils.removeSync(distDirPath, {
14-
skipErrors: true, fs,
15-
})
16-
const buildCommand = `${webpackPath} --config ${webpackConfigPath}`
9+
function run() {
10+
const buildCommand = `${webpackPath} --config ${webpackConfigPath} --progress`
1711
console.log(chalk.blue(buildCommand))
18-
const child = exec(buildCommand, (error, stdout, stderr) => {
12+
const child = exec(buildCommand, {
13+
maxBuffer: 2 * 1024 * 1024,
14+
}, (error, stdout, stderr) => {
1915
if (error) {
2016
console.error(error.message)
2117
}
2218
})
23-
child.stdout.on('data', (chunk) => {
24-
console.log(chunk.toString())
25-
})
19+
child.stdout.pipe(process.stdout)
2620
}
2721

2822
run()

‎build/webpack-config/dev-server.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const path = require('path')
2-
const projectPath = __dirname.replace(`build${path.sep}webpack-config`, '')
3-
const { devServerConfig } = require(`${projectPath}package.json`)
2+
const projectPath = process.cwd()
3+
const { devServerConfig } = require(path.join(projectPath, 'package.json'))
44

55
module.exports = {
66
watchContentBase: true,
@@ -26,7 +26,7 @@ module.exports = {
2626
},
2727
before: function (app, server) {
2828
},
29-
after (app, server) {
29+
after(app, server) {
3030
},
3131
allowedHosts: []
3232
}

‎build/webpack-config/module.js‎

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,56 @@
11
const path = require('path')
22
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
33
const isProduction = process.env.NODE_ENV === 'production'
4-
const projectPath = __dirname.replace(`build${path.sep}webpack-config`, '')
5-
const { webpackConfig } = require(`${projectPath}package.json`)
4+
const projectPath = process.cwd()
5+
const { webpackConfig } = require(path.join(projectPath, 'package.json'))
66

77
module.exports = {
88
rules: [
99
{
10-
test: /\.(png|svg|jpg|gif)$/, use: [ {
11-
loader: 'file-loader',
12-
options: { name: 'img/[name].[hash].[ext]' }
13-
} ]
10+
test: /\.(png|svg|jpg|gif)$/,
11+
use: [
12+
{
13+
loader: 'file-loader',
14+
options: { name: 'img/[name].[hash].[ext]' },
15+
},
16+
],
1417
},
1518
{
16-
test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ {
17-
loader: 'file-loader',
18-
options: { name: 'font/[name].[hash].[ext]' }
19-
} ]
19+
test: /\.(woff|woff2|eot|ttf|otf)$/,
20+
use: [
21+
{
22+
loader: 'file-loader',
23+
options: { name: 'font/[name].[hash].[ext]' },
24+
},
25+
],
2026
},
21-
{ test: /\.vue$/, use: [ 'vue-loader' ] },
27+
{ test: /\.vue$/, use: ['vue-loader'] },
2228
{
2329
test: /\.s?css$/,
2430
use: [
25-
isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader', 'sass-loader', 'postcss-loader'
26-
]
31+
isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
32+
'css-loader',
33+
'sass-loader',
34+
'postcss-loader',
35+
],
2736
},
2837
{
2938
test: /\.ts$/,
3039
loader: 'ts-loader',
31-
options: { appendTsSuffixTo: [ /\.vue$/ ] },
32-
exclude: /node_modules/
40+
options: { appendTsSuffixTo: [/\.vue$/] },
41+
exclude: /node_modules/,
3342
},
3443
{
3544
test: /\.js$/,
3645
exclude: (resourcePath) => {
37-
const transplieRegArray = [ ...webpackConfig.transpileModules ]
46+
const transplieRegArray = [...webpackConfig.transpileModules]
3847
if (/\Wnode_modules\W/.test(resourcePath)) {
39-
for (let i = 0, len = transplieRegArray.length; i < len; i++) {
40-
const transplieItem = transplieRegArray[ i ]
48+
for (
49+
let i = 0, len = transplieRegArray.length;
50+
i < len;
51+
i++
52+
) {
53+
const transplieItem = transplieRegArray[i]
4154
if (typeof transplieItem === 'string') {
4255
return !resourcePath.includes(transplieItem)
4356
} else if (typeof transplieItem === 'object') {
@@ -48,7 +61,7 @@ module.exports = {
4861
}
4962
return false
5063
},
51-
use: [ 'babel-loader' ]
64+
use: ['babel-loader'],
5265
},
53-
]
66+
],
5467
}

‎build/webpack-config/optimization.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
1+
const os = require('os')
22
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
3+
const TerserPlugin = require('terser-webpack-plugin')
34

45
module.exports = {
56
minimizer: [
@@ -11,16 +12,25 @@ module.exports = {
1112
},
1213
canPrint: true
1314
}),
14-
new UglifyJsPlugin({
15+
new TerserPlugin({
1516
test: /\.js$/i,
17+
exclude: /^vendor/,
18+
parallel: os.cpus().length,
19+
sourceMap: true,
1620
extractComments: false,
17-
uglifyOptions: {
21+
terserOptions: {
22+
ecma: 5,
1823
warnings: false,
24+
parse: {},
25+
compress: {},
1926
mangle: true,
27+
keep_classnames: false,
2028
keep_fnames: false,
2129
output: {
30+
beautify: false,
2231
comments: false,
23-
quote_style: '1', // 只用单引号
32+
// 只用单引号
33+
quote_style: '1',
2434
},
2535
},
2636
}),

‎build/webpack-config/plugins.js‎

Lines changed: 48 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,39 @@
11
const path = require('path')
22
const os = require('os')
3+
const webpack = require('webpack')
4+
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
35
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
6+
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
47
const HtmlWebpackPlugin = require('html-webpack-plugin')
5-
const webpack = require('webpack')
68
const VueLoaderPlugin = require('vue-loader/lib/plugin')
7-
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
89
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
10+
const CopyWebpackPlugin = require('copy-webpack-plugin')
911
const isProduction = process.env.NODE_ENV === 'production'
10-
const projectPath = __dirname.replace(`build${path.sep}webpack-config`, '')
11-
12-
function getAccessUrlArray () {
13-
const result = []
14-
const netInterfaces = Object.entries(os.networkInterfaces())
15-
for (let netInterface of netInterfaces) {
16-
const interfaceInfo = netInterface[ 1 ]
17-
interfaceInfo.forEach(ipObj => {
18-
if (ipObj.family === 'IPv4') {
19-
result.push(` - Access URL: http://${ipObj.address}:${process.env.port}/index.html`)
20-
}
21-
})
22-
}
23-
return result
24-
}
25-
26-
const compileMessages = () => {
27-
const messages = []
28-
if (!isProduction) {
29-
return getAccessUrlArray().concat(messages)
30-
}
31-
return messages
32-
}
12+
const projectPath = process.cwd()
3313

3414
const plugins = [
15+
new CleanWebpackPlugin({
16+
verbose: true,
17+
cleanStaleWebpackAssets: false,
18+
cleanOnceBeforeBuildPatterns: ['**/*'],
19+
}),
3520
new FriendlyErrorsWebpackPlugin({
3621
compilationSuccessInfo: {
3722
messages: compileMessages(),
38-
notes: []
23+
notes: [],
3924
},
4025
clearConsole: true,
4126
}),
27+
new webpack.DllReferencePlugin({
28+
context: projectPath,
29+
manifest: require(path.join(
30+
projectPath,
31+
'public/vendor/manifest.json'
32+
)),
33+
}),
4234
new webpack.IgnorePlugin({
4335
checkResource: (resourcePath) => {
44-
if (/moment\/locale\/(?!zh-cn)/.test(resourcePath)){
36+
if (/moment\/locale\/(?!zh-cn)/.test(resourcePath)) {
4537
return true
4638
}
4739
},
@@ -52,20 +44,47 @@ const plugins = [
5244
chunkFilename: 'css/[name].[hash].css',
5345
}),
5446
new HtmlWebpackPlugin({
55-
favicon: `${projectPath}public/favicon.ico`,
47+
favicon: path.join(projectPath, 'public/favicon.ico'),
5648
minify: {
5749
removeRedundantAttributes: true,
5850
collapseWhitespace: true,
5951
removeAttributeQuotes: true,
6052
removeComments: true,
61-
collapseBooleanAttributes: true
53+
collapseBooleanAttributes: true,
6254
},
6355
template: path.resolve(projectPath, 'public/index.html'),
6456
}),
57+
new CopyWebpackPlugin([
58+
{ from: 'public/vendor', to: 'vendor', context: projectPath },
59+
]),
6560
]
6661

6762
if (process.env.isAnalyze) {
6863
plugins.push(new BundleAnalyzerPlugin())
6964
}
7065

66+
function getAccessUrlArray() {
67+
const result = []
68+
const netInterfaces = Object.entries(os.networkInterfaces())
69+
for (let netInterface of netInterfaces) {
70+
const interfaceInfo = netInterface[1]
71+
interfaceInfo.forEach((ipObj) => {
72+
if (ipObj.family === 'IPv4') {
73+
result.push(
74+
` - Access URL: http://${ipObj.address}:${process.env.port}/index.html`
75+
)
76+
}
77+
})
78+
}
79+
return result
80+
}
81+
82+
function compileMessages() {
83+
const messages = []
84+
if (!isProduction) {
85+
return getAccessUrlArray().concat(messages)
86+
}
87+
return messages
88+
}
89+
7190
module.exports = plugins

‎build/webpack.config.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ const devServer = require('./webpack-config/dev-server.js')
33
const ModuleConfig = require('./webpack-config/module.js')
44
const optimization = require('./webpack-config/optimization.js')
55
const plugins = require('./webpack-config/plugins.js')
6-
const projectPath = __dirname.replace(/build$/, '')
7-
const { webpackConfig } = require(`${projectPath}package.json`)
6+
const projectPath = process.cwd()
87

98
module.exports = {
109
mode: process.env.NODE_ENV,
1110
stats: 'errors-only',
1211
entry: {
13-
app: [ `${projectPath}/src/main.ts` ],
12+
app: [ path.resolve(projectPath, 'src/main.ts') ],
1413
},
1514
output: {
1615
filename: 'js/[name][hash].js',
1716
chunkFilename: 'js/[name][hash].js',
18-
path: path.resolve(projectPath, 'dist'),
17+
path: path.join(projectPath, 'dist'),
1918
publicPath: process.env.baseUrl,
2019
},
2120
resolve: {
@@ -24,7 +23,10 @@ module.exports = {
2423
},
2524
extensions: [ '.ts', '.js', '.json' ],
2625
mainFiles: [ 'index' ],
27-
modules: [ `${projectPath}src`, `node_modules` ],
26+
modules: [
27+
path.resolve(projectPath, 'src'),
28+
path.resolve(projectPath, 'node_modules'),
29+
],
2830
},
2931
performance: {
3032
hints: false

0 commit comments

Comments
 (0)