Skip to content

Commit

Permalink
build: update packages
Browse files Browse the repository at this point in the history
  • Loading branch information
@zerosoul
zerosoul committed Sep 6, 2020
1 parent 3100df1 commit 356cae3
Show file tree
Hide file tree
Showing 7 changed files with 8,059 additions and 9,746 deletions.
44 changes: 21 additions & 23 deletions config/webpack.config.common.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const HappyPack = require('happypack');
Expand All @@ -17,7 +16,7 @@ const env = getClientEnvironment(publicUrl);
module.exports = {
resolve: {
// webpack 能识别的文件扩展名
extensions: ['.js', '.jsx', '.json', '.less', '.css']
extensions: ['.js', '.jsx', '.json', '.less', '.css'],
// 针对 npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件
// mainFields: ["jsnext:main", "browser", "main"]
},
Expand All @@ -30,15 +29,15 @@ module.exports = {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000
}
limit: 10000,
},
},
// babel loader
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
exclude: /node_modules/,
use: 'happypack/loader'
use: 'happypack/loader',
},
// file-loader将所有静态文件可被WebpackDevServer伺服
// 生产环境，这些静态文件会被拷贝到build目录
Expand All @@ -50,27 +49,27 @@ module.exports = {
/\.(bmp|gif|jpe?g|png)$/,
/\.less$/,
/\.html$/,
/\.json$/
/\.json$/,
],
loader: 'file-loader',
options: {
name: 'static/assets/[name].[hash:8].[ext]'
}
}
]
}
]
name: 'static/assets/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new HappyPack({
loaders: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
]
cacheDirectory: true,
},
},
],
}),
new HtmlWebpackPlugin({
inject: true,
Expand All @@ -88,8 +87,8 @@ module.exports = {
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
minifyURLs: true,
},
}),
new AutoDllPlugin(
process.env.NODE_ENV === 'development'
Expand All @@ -101,18 +100,17 @@ module.exports = {
filename: '[name]_[hash].dll.js',
path: './dll',
entry: {
react: ['react', 'react-dom', 'styled-components']
}
react: ['react', 'react-dom', 'styled-components'],
},
}
),
new InterpolateHtmlPlugin(env.raw)
],
// node中用到，但是浏览器不用到的类库，给出空对象模拟
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
child_process: 'empty',
},
};
36 changes: 18 additions & 18 deletions config/webpack.config.dev.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const webpack = require('webpack');

const paths = require('./paths');
const merge = require('webpack-merge');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
// 为方便配置，以根目录为本地服务器地址
const publicPath = '/';
Expand All @@ -15,7 +15,7 @@ module.exports = merge(commonConfig, {
// 热更新，并实时显示错误
'react-dev-utils/webpackHotDevClient',
// 主要代码，之所以放在最后，是为了程序有错误，修改后还能刷新
paths.appIndexJs
paths.appIndexJs,
],
output: {
// Add /* filename */ comments to generated require()s in the output.
Expand All @@ -26,7 +26,7 @@ module.exports = merge(commonConfig, {
// chunk 文件（开启 code splitting 才会有）
chunkFilename: 'static/js/[name].chunk.js',
// WebpackDevServer 伺服的根目录：/
publicPath
publicPath,
},

module: {
Expand All @@ -45,35 +45,35 @@ module.exports = merge(commonConfig, {
{
loader: 'css-loader',
options: {
importLoaders: 1
}
}
]
}
]
}
]
importLoaders: 1,
},
},
],
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
NODE_ENV: JSON.stringify('development'),
},
}),
// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
new webpack.HotModuleReplacementPlugin(),
],

// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
performance: {
hints: false
hints: false,
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
chunks: 'all',
},
},
});
70 changes: 35 additions & 35 deletions config/webpack.config.prod.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const merge = require('webpack-merge');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.config.common');
const paths = require('./paths');
const TerserPlugin = require('terser-webpack-plugin');
Expand All @@ -20,41 +20,41 @@ module.exports = merge(commonConfig, {
// 主文件以及一个异步加载chunk的文件
filename: 'static/js/[name].[chunkhash:6].js',
chunkFilename: 'static/js/[name].[chunkhash:6].chunk.js',
publicPath: paths.servedPath
publicPath: paths.servedPath,
},
resolve: {
modules: [__dirname, 'node_modules']
modules: [__dirname, 'node_modules'],
},
module: {
rules: [
{
oneOf: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
}
]
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production')
}
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
},
}),
new webpack.NamedChunksPlugin(),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[name].css'
chunkFilename: '[name].css',
}),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: 'asset-manifest.json'
fileName: 'asset-manifest.json',
}),
new GenerateSW({
clientsClaim: true,
Expand All @@ -73,14 +73,14 @@ module.exports = merge(commonConfig, {
//配置 expiration
expiration: {
maxEntries: 10,
maxAgeSeconds: 60
maxAgeSeconds: 60,
},

//配置哪些响应被认为是可缓存的
cacheableResponse: {
statuses: [0, 200]
}
}
statuses: [0, 200],
},
},
},
{
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
Expand All @@ -93,14 +93,14 @@ module.exports = merge(commonConfig, {
//配置 expiration
expiration: {
maxEntries: 10,
maxAgeSeconds: 3600
maxAgeSeconds: 3600,
},

//配置哪些响应被认为是可缓存的
cacheableResponse: {
statuses: [0, 200]
}
}
statuses: [0, 200],
},
},
},
{
urlPattern: /\.js$/,
Expand All @@ -113,15 +113,15 @@ module.exports = merge(commonConfig, {
//配置 expiration
expiration: {
maxEntries: 10,
maxAgeSeconds: 3600
maxAgeSeconds: 3600,
},

//配置哪些响应被认为是可缓存的
cacheableResponse: {
statuses: [0, 200]
}
}
}
statuses: [0, 200],
},
},
},
],
navigateFallbackDenylist: [
// Exclude URLs starting with /_, as they're likely an API call
Expand All @@ -130,13 +130,13 @@ module.exports = merge(commonConfig, {
// as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks).
new RegExp('/[^/?]+\\.[^/]+$')
]
new RegExp('/[^/?]+\\.[^/]+$'),
],
}),
new BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: 'static'
})
analyzerMode: 'static',
}),
],
optimization: {
minimizer: [
Expand All @@ -145,10 +145,10 @@ module.exports = merge(commonConfig, {
mangle: true,
ecma: 8,
compress: {
drop_console: true
}
}
})
]
}
drop_console: true,
},
},
}),
],
},
});
10 changes: 5 additions & 5 deletions config/webpackDevServer.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const paths = require('./paths');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';

module.exports = function(proxy, allowedHost) {
module.exports = function (proxy, allowedHost) {
return {
// gzip
compress: true,
Expand Down Expand Up @@ -48,7 +48,7 @@ module.exports = function(proxy, allowedHost) {
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebookincubator/create-react-app/issues/1065
watchOptions: {
ignored: ignoredFiles(paths.appSrc)
ignored: ignoredFiles(paths.appSrc),
},
// Enable HTTPS if the HTTPS environment variable is set to 'true'
https: protocol === 'https',
Expand All @@ -57,7 +57,7 @@ module.exports = function(proxy, allowedHost) {
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true
disableDotRule: true,
},
public: allowedHost,
proxy,
Expand All @@ -69,7 +69,7 @@ module.exports = function(proxy, allowedHost) {
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
app.use(noopServiceWorkerMiddleware());
}
app.use(noopServiceWorkerMiddleware('/'));
},
};
};
Loading

0 comments on commit 356cae3

Please sign in to comment.