From fc81402ece1847e053ea8794eacb2d1bc5885042 Mon Sep 17 00:00:00 2001
From: robbie <38212028+USTC-Han@users.noreply.github.com>
Date: Sun, 1 Sep 2019 22:46:49 +0800
Subject: [PATCH] build(webpack): update webpack to webpack@4.39.3 (#56)
* build(webpack): update webpack to webpack@4.39.3
* update some package about webpack
* optimize webpack config
* fix webpack css minimize issue
* optimize npm scripts
* fix webpack plugin compiler hook
* add source-map and remove react-hot-loader
---
.babelrc | 9 +-
config/postcss.config.js | 5 -
config/webpack.config.js | 76 +-
config/webpack.config.site.js | 113 +-
package-lock.json | 3644 ++++++++++++--------------
package.json | 59 +-
{bin => scripts}/create.js | 0
{bin => scripts}/deploy.js | 0
{bin => scripts}/template/dox.js | 0
{bin => scripts}/template/index.js | 0
{bin => scripts}/template/index.less | 0
site/apps/Start/index.js | 10 +-
site/index.html | 2 +-
site/server.js | 135 +-
14 files changed, 1995 insertions(+), 2058 deletions(-)
delete mode 100644 config/postcss.config.js
rename {bin => scripts}/create.js (100%)
rename {bin => scripts}/deploy.js (100%)
rename {bin => scripts}/template/dox.js (100%)
rename {bin => scripts}/template/index.js (100%)
rename {bin => scripts}/template/index.less (100%)
diff --git a/.babelrc b/.babelrc
index 5c31da40..b67afeb9 100644
--- a/.babelrc
+++ b/.babelrc
@@ -7,12 +7,5 @@
"@babel/plugin-syntax-dynamic-import",
["@babel/plugin-proposal-class-properties", { "loose": false }],
["@babel/plugin-proposal-optional-chaining", { "loose": false }]
- ],
- "env": {
- "development": {
- "plugins": [
- "react-hot-loader/babel"
- ]
- }
- }
+ ]
}
diff --git a/config/postcss.config.js b/config/postcss.config.js
deleted file mode 100644
index 6417a467..00000000
--- a/config/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = ({ file, options, env }) => ({
- plugins: {
- 'autoprefixer': env === 'production' ? options.autoprefixer : false
- }
-})
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 2b878916..b86bc97b 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -1,7 +1,10 @@
const path = require('path')
const rimraf = require('rimraf')
const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const autoprefixer = require('autoprefixer')
const sourcePath = path.resolve(__dirname, '../src')
const outputPath = path.resolve(__dirname, '../dist')
const entryName = `earth-ui.min`
@@ -16,34 +19,48 @@ const config = {
filename: '[name].js',
libraryTarget: 'umd'
},
+ devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
- loaders: 'babel-loader',
+ use: ['babel-loader'],
include: sourcePath
},
{
test: /\.less$/,
- use: ExtractTextPlugin.extract({
- fallback: 'style-loader',
- use: [
- 'css-loader?minimize=true',
- 'postcss-loader?config.path=config/postcss.config.js',
- 'less-loader?javascriptEnabled=true'
- ]
- }),
+ use: [
+ MiniCssExtractPlugin.loader,
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: () => [autoprefixer({})]
+ }
+ },
+ {
+ loader: 'less-loader',
+ options: {
+ javascriptEnabled: true
+ }
+ }
+ ],
include: sourcePath
},
{
test: /\.css$/,
- use: ExtractTextPlugin.extract({
- fallback: 'style-loader',
- use: [
- 'css-loader',
- 'postcss-loader?config.path=config/postcss.config.js'
- ]
- }),
+ use: [
+ MiniCssExtractPlugin.loader,
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: () => [autoprefixer({})]
+ }
+ }
+ ],
include: sourcePath
},
{
@@ -52,7 +69,7 @@ const config = {
},
{
test: /\.snap$/,
- loader: 'ignore-loader'
+ use: ['ignore-loader']
}
]
},
@@ -86,13 +103,22 @@ const config = {
new webpack.DefinePlugin({
prefixCls: JSON.stringify('earthui')
}),
- new ExtractTextPlugin('[name].css'),
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- properties: false
- }
- })
- ]
+ new MiniCssExtractPlugin('[name].css')
+ ],
+ optimization: {
+ minimizer: [
+ new UglifyJsPlugin({
+ parallel: true,
+ sourceMap: true
+ }),
+ new OptimizeCSSAssetsPlugin({
+ cssProcessorOptions: {
+ map: true,
+ preset: ['default', { discardComments: { removeAll: true } }]
+ }
+ })
+ ]
+ }
}
config.entry[entryName] = [`${sourcePath}/components/index.js`]
diff --git a/config/webpack.config.site.js b/config/webpack.config.site.js
index 418784b0..86bbdc53 100644
--- a/config/webpack.config.site.js
+++ b/config/webpack.config.site.js
@@ -1,14 +1,16 @@
+const fs = require('fs')
const webpack = require('webpack')
const path = require('path')
const rimraf = require('rimraf')
const LiveReloadPlugin = require('webpack-livereload-plugin')
-const fs = require('fs')
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
+const autoprefixer = require('autoprefixer')
const Prism = require('../site/3rdParty/prism/prism.js')
const sitePath = path.resolve(__dirname, '../site')
const sourcePath = path.resolve(__dirname, '../src')
const outputPath = path.resolve(__dirname, '../site/dist')
-const isProduction = process.env.SITE_ENV === 'production'
+const isProduction = process.env.NODE_ENV === 'production'
rimraf.sync(outputPath)
@@ -26,17 +28,19 @@ const config = {
rules: [
{
test: /\.(js|jsx)$/,
- loader: 'babel-loader',
- options: {
- cacheDirectory: true
- // babelrc: false,
- // extends: 'config/.babelrc'
- },
+ use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
- loader: 'file-loader?name=files/[hash].[ext]'
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: 'files/[hash].[ext]'
+ }
+ }
+ ]
},
{
test: /\.less$/,
@@ -50,9 +54,8 @@ const config = {
{
loader: 'postcss-loader',
options: {
- config: {
- path: 'config/postcss.config.js'
- }
+ ident: 'postcss',
+ plugins: () => [autoprefixer({})]
}
},
{
@@ -65,8 +68,21 @@ const config = {
},
{
test: /\.css$/,
- loader:
- 'style-loader!css-loader!postcss-loader?config.path=config/postcss.config.js'
+ use: [
+ {
+ loader: 'style-loader'
+ },
+ {
+ loader: 'css-loader'
+ },
+ {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss',
+ plugins: () => [autoprefixer({})]
+ }
+ }
+ ]
},
{
test: /\.md$/,
@@ -85,11 +101,11 @@ const config = {
},
{
test: /\.dox$/,
- loader: 'babel-loader!dox-loader'
+ use: ['babel-loader', 'dox-loader']
},
{
test: /\.snap$/,
- loader: 'ignore-loader'
+ use: ['ignore-loader']
}
]
},
@@ -115,54 +131,41 @@ const config = {
'react-dom': 'ReactDOM',
'prop-types': 'PropTypes'
},
- plugins: []
-}
-
-if (isProduction) {
- config.plugins.push(
+ plugins: [
new webpack.DefinePlugin({
- 'process.env': {
- SITE_ENV: JSON.stringify('production')
- }
- })
- )
- config.plugins.push(
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- },
- output: {
- comments: false
- }
+ prefixCls: JSON.stringify('earthui')
})
- )
-} else {
+ ],
+ optimization: {}
+}
+
+if (!isProduction) {
config.plugins.push(
new LiveReloadPlugin({
appendScriptTag: true
- })
+ }),
+ new FriendlyErrorsWebpackPlugin()
)
}
-config.plugins.push(
- new webpack.DefinePlugin({
- prefixCls: JSON.stringify('earthui')
- })
-)
-
// Generate index.html in 'site' dir
-config.plugins.push(function () {
- this.plugin('done', function (statsData) {
- const stats = statsData.toJson()
- let html = fs.readFileSync(`${sitePath}/index.html`, 'utf8')
- const distPath =
- config.output.publicPath +
- 'site.' +
- (isProduction ? stats.hash + '.' : '') +
- 'js'
- html = html.replace(/(
-
+