Webpack Upgrade

This commit is contained in:
Tony Air 2019-05-23 19:44:10 +07:00
parent 18af5420d5
commit 4fa466157f
4 changed files with 78 additions and 41 deletions

View File

@ -23,80 +23,85 @@
"lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q" "lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q"
}, },
"dependencies": { "dependencies": {
"@google/markerclusterer": "^1.0.3",
"bootbox": "^4.4.0", "bootbox": "^4.4.0",
"bootstrap": "^4.1.1", "bootstrap": "^4.3.1",
"bootstrap-datepicker": "^1.8.0", "bootstrap-confirmation2": "^4.1.0",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-offcanvas": "^1.0.0", "bootstrap-offcanvas": "^1.0.0",
"bootstrap-select": "^1.13.2", "bootstrap-select": "^1.13.10",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-confirmation2": "^4.0.4",
"bootstrap-table": "^1.14.2", "bootstrap-table": "^1.14.2",
"bootstrap-timepicker": "^0.5.2",
"core-util-is": "^1.0.2", "core-util-is": "^1.0.2",
"croppie": "^2.6.4",
"exif-js": "^2.3.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"foundation-emails": "^2.2.1", "foundation-emails": "^2.2.1",
"gijgo": "^1.9.7", "gijgo": "^1.9.13",
"jquery": "^3.3.1", "jquery": "^3.4.1",
"jquery-hammerjs": "^2.0.0", "jquery-hammerjs": "^2.0.0",
"jquery-zoom": "^1.7.21", "jquery-zoom": "^1.7.21",
"jquery.appear": "^1.0.1", "jquery.appear": "^1.0.1",
"mapbox-gl": "^0.48.0",
"meta-lightbox": "^1.0.0", "meta-lightbox": "^1.0.0",
"offcanvas-bootstrap": "^2.5.2", "offcanvas-bootstrap": "^2.5.2",
"popper.js": "^1.14.3", "popper.js": "^1.15.0",
"pouchdb": "^6.4.3", "pouchdb": "^6.4.3",
"react-bootstrap4-form-validation": "^1.0.5", "quill": "^1.3.6",
"react-bootstrap4-form-validation": "^1.0.10",
"routie": "0.0.1", "routie": "0.0.1",
"smooth-scroll": "^14.2.0", "smooth-scroll": "^14.2.1",
"yarn": "^1.7.0" "webpack-cli": "^3.3.2",
"yarn": "^1.16.0"
}, },
"devDependencies": { "devDependencies": {
"animate.css": "^3.5.2", "animate.css": "^3.7.0",
"autoprefixer": "^7.2.5", "autoprefixer": "^7.2.5",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-eslint": "^8.2.3", "babel-eslint": "^8.2.6",
"babel-loader": "^7.1.2", "babel-loader": "^7.1.2",
"babel-plugin-transform-react-jsx": "^6.24.1", "babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1", "babel-preset-stage-2": "^6.24.1",
"browser-sync": "^2.24.5", "browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "^1.2.0", "browser-sync-webpack-plugin": "^2.2.2",
"copy-webpack-plugin": "^4.3.1", "copy-webpack-plugin": "^4.6.0",
"copyfiles": "^1.2.0", "copyfiles": "^1.2.0",
"cross-env": "^5.1.6", "cross-env": "^5.1.6",
"css-loader": "^0.28.9", "css-loader": "^0.28.9",
"eslint": "^4.18.1", "eslint": "^4.18.1",
"eslint-plugin-import": "^2.11.0", "eslint-plugin-import": "^2.17.2",
"eslint-plugin-jquery": "^1.3.1", "eslint-plugin-jquery": "^1.5.0",
"eslint-plugin-react": "^7.8.2", "eslint-plugin-react": "^7.13.0",
"exports-loader": "^0.7.0", "exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^3.0.2", "extract-text-webpack-plugin": "^4.0.0-beta.0",
"favicons-webpack-plugin": "0.0.9", "favicons-webpack-plugin": "0.0.9",
"file-loader": "^1.1.5", "file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^4.0.0-beta.5",
"laravel-mix": "^2.1.11", "laravel-mix": "^2.1.14",
"lost": "^8.2.0", "lost": "^8.3.1",
"node-sass": "^4.9.0", "node-sass": "^4.12.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
"optimize-css-assets-webpack-plugin": "^4.0.1", "optimize-css-assets-webpack-plugin": "^4.0.1",
"postcss-loader": "^2.1.5", "postcss-loader": "^2.1.5",
"react": "^16.3.2", "react": "^16.8.6",
"react-dom": "^16.3.2", "react-dom": "^16.8.6",
"react-hot-loader": "^3.1.3", "react-hot-loader": "^3.1.3",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2", "redux-devtools-extension": "^2.13.8",
"resolve-url-loader": "^2.2.1", "resolve-url-loader": "^2.3.2",
"rimraf": "^2.6.2", "rimraf": "^2.6.3",
"sass-lint": "^1.12.1", "sass-lint": "^1.13.1",
"sass-lint-fix": "^1.12.1", "sass-lint-fix": "^1.12.1",
"sass-loader": "^6.0.6", "sass-loader": "^6.0.6",
"script-ext-html-webpack-plugin": "^1.8.8", "script-ext-html-webpack-plugin": "^2.1.3",
"style-loader": "^0.19.0", "style-loader": "^0.19.0",
"svg-url-loader": "^2.3.1", "svg-url-loader": "^2.3.1",
"uglifyjs-webpack-plugin": "^1.2.5", "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
"url-loader": "^0.6.2", "url-loader": "^0.6.2",
"webpack": "^3.12.0", "webpack": "^4.32.2",
"webpack-dev-server": "^2.11.1", "webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1",
"webpack-manifest-plugin": "^1.3.2", "webpack-manifest-plugin": "^1.3.2",
"webpack-merge": "^4.1.1" "webpack-merge": "^4.1.1"
}, },

View File

@ -90,6 +90,16 @@ module.exports = {
externals: { externals: {
'jquery': 'jQuery', 'jquery': 'jQuery',
}, },
optimization: {
namedModules: true, // NamedModulesPlugin()
splitChunks: { // CommonsChunkPlugin()
name: 'vendor',
minChunks: 2
},
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
concatenateModules: true //ModuleConcatenationPlugin
},
module: { module: {
rules: [{ rules: [{
test: /\.jsx?$/, test: /\.jsx?$/,

View File

@ -16,6 +16,7 @@ const PORT = process.env.PORT || conf.PORT;
const config = merge.strategy({ const config = merge.strategy({
entry: 'prepend' entry: 'prepend'
})(common, { })(common, {
mode: 'development',
entry: { entry: {
app: [ app: [
@ -91,9 +92,7 @@ const config = merge.strategy({
}] }]
}, },
plugins: [ plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
], ],
devServer: { devServer: {

View File

@ -14,6 +14,7 @@ const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
let plugins = [ let plugins = [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
@ -25,19 +26,18 @@ let plugins = [
minimize: true, minimize: true,
debug: false debug: false
}), }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
comments: false
}),
new ExtractTextPlugin({ new ExtractTextPlugin({
filename: 'css/[name].css', filename: 'css/[name].css',
allChunks: true allChunks: true
}), }),
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
title: 'Webpack App',
logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'), logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
prefix: '/icons/', prefix: '/icons/',
emitStats: false,
persistentCache: true,
inject: false,
statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'), statsFilename: path.join(conf.APPDIR, conf.DIST, 'icons', 'iconstats.json'),
icons: { icons: {
android: true, android: true,
@ -59,8 +59,12 @@ commonVariables.themes.forEach((theme) => {
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png'); const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
if (filesystem.existsSync(faviconPath)) { if (filesystem.existsSync(faviconPath)) {
plugins.push(new FaviconsWebpackPlugin({ plugins.push(new FaviconsWebpackPlugin({
title: 'Webpack App',
logo: faviconPath, logo: faviconPath,
prefix: '/' + theme + '-icons/', prefix: '/' + theme + '-icons/',
emitStats: false,
persistentCache: true,
inject: false,
statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'), statsFilename: path.join(conf.APPDIR, conf.DIST, theme + '-icons', 'iconstats.json'),
icons: { icons: {
android: true, android: true,
@ -79,6 +83,25 @@ commonVariables.themes.forEach((theme) => {
}); });
module.exports = merge(common, { module.exports = merge(common, {
mode: 'production',
optimization: {
namedModules: true, // NamedModulesPlugin()
splitChunks: { // CommonsChunkPlugin()
name: 'vendor',
minChunks: 2
},
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
concatenateModules: true, //ModuleConcatenationPlugin
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
sourceMap: false,
comments: false
}
})
]
},
devtool: '', devtool: '',
output: { output: {