From 142eed27be1f8c8ce9a356d024ff0bb3e11cc9a6 Mon Sep 17 00:00:00 2001 From: Jason Chen Date: Sat, 2 Jun 2018 16:47:41 -0700 Subject: [PATCH] update webpack --- _develop/scripts/release.sh | 2 +- _develop/webpack.config.js | 243 ++++++++++++++++++------------------ package.json | 13 +- 3 files changed, 128 insertions(+), 130 deletions(-) diff --git a/_develop/scripts/release.sh b/_develop/scripts/release.sh index f7320554f4..47afc11756 100755 --- a/_develop/scripts/release.sh +++ b/_develop/scripts/release.sh @@ -21,7 +21,7 @@ cp dist/quill.core.css dist/quill.bubble.css dist/quill.snow.css dist/quill.js d cd .release printf "cdn: .\nversion: ." > jekyll.yml -jekyll build -s ../docs -d _site --config ../docs/_config.yml,jekyll.yml +jekyll build -s ../docs -d _site --config ../docs/_config.yml mkdir quill/examples mv _site/standalone/bubble/index.html quill/examples/bubble.html diff --git a/_develop/webpack.config.js b/_develop/webpack.config.js index 0faff4bce2..194bad9c44 100644 --- a/_develop/webpack.config.js +++ b/_develop/webpack.config.js @@ -1,6 +1,6 @@ const path = require('path'); const webpack = require('webpack'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const pkg = require('../package.json'); const bannerPack = new webpack.BannerPlugin({ @@ -30,138 +30,135 @@ const source = [ return path.resolve(__dirname, '..', file); }); -module.exports = env => { - const config = { - context: path.resolve(__dirname, '..'), - entry: { - 'quill.js': ['./quill.js'], - 'quill.core.js': ['./core.js'], - 'quill.core': './assets/core.styl', - 'quill.bubble': './assets/bubble.styl', - 'quill.snow': './assets/snow.styl', - 'unit.js': './test/unit.js', - }, - output: { - filename: '[name]', - library: 'Quill', - libraryExport: 'default', - libraryTarget: 'umd', - path: path.resolve(__dirname, '../dist/'), - }, - resolve: { - alias: { - parchment: path.resolve( - __dirname, - '../node_modules/parchment/src/parchment', - ), - }, - extensions: ['.js', '.styl', '.ts'], - }, - module: { - rules: [ - { - test: /\.ts$/, - use: [ - { - loader: 'ts-loader', - options: { - compilerOptions: { - declaration: false, - target: 'es5', - module: 'commonjs', - }, - transpileOnly: true, - }, - }, - ], - }, - { - test: /\.styl$/, - include: [path.resolve(__dirname, '../assets')], - use: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: ['css-loader', 'stylus-loader'], - }), - }, - { - test: /\.svg$/, - include: [path.resolve(__dirname, '../assets/icons')], - use: [ +const jsRules = { + test: /\.js$/, + include: source, + use: [ + { + loader: 'babel-loader', + options: { + presets: [ + [ + 'env', { - loader: 'html-loader', - options: { - minimize: true, - }, - }, - ], - }, - { - test: /\.js$/, - include: source, - use: [ - { - loader: 'babel-loader', - options: { - presets: [ - [ - 'env', - { - targets: { - browsers: [ - 'last 2 Chrome major versions', - 'last 2 Firefox major versions', - 'last 2 Safari major versions', - 'last 2 Edge major versions', - 'last 2 iOS major versions', - 'last 2 ChromeAndroid major versions', - ], - }, - }, - ], + targets: { + browsers: [ + 'last 2 Chrome major versions', + 'last 2 Firefox major versions', + 'last 2 Safari major versions', + 'last 2 Edge major versions', + 'last 2 iOS major versions', + 'last 2 ChromeAndroid major versions', ], }, }, ], + ], + }, + }, + ], +}; + +const svgRules = { + test: /\.svg$/, + include: [path.resolve(__dirname, '../assets/icons')], + use: [ + { + loader: 'html-loader', + options: { + minimize: true, + }, + }, + ], +}; + +const stylRules = { + test: /\.styl$/, + include: [path.resolve(__dirname, '../assets')], + use: [MiniCssExtractPlugin.loader, 'css-loader', 'stylus-loader'], +}; + +const tsRules = { + test: /\.ts$/, + use: [ + { + loader: 'ts-loader', + options: { + compilerOptions: { + declaration: false, + module: 'es6', + sourceMap: true, + target: 'es6', }, - ], - noParse: [ - /\/node_modules\/clone\/clone\.js$/, - /\/node_modules\/eventemitter3\/index\.js$/, - /\/node_modules\/extend\/index\.js$/, - ], + transpileOnly: true, + }, }, - plugins: [ - bannerPack, - constantPack, - new ExtractTextPlugin({ - filename: '[name].css', - allChunks: true, - }), - ], - devServer: { - contentBase: path.resolve(__dirname, '../dist'), - hot: false, - port: process.env.npm_package_config_ports_webpack, - stats: 'minimal', - disableHostCheck: true, + ], +}; + +const baseConfig = { + mode: 'development', + context: path.resolve(__dirname, '..'), + entry: { + 'quill.js': ['./quill.js'], + 'quill.core.js': ['./core.js'], + 'quill.core': './assets/core.styl', + 'quill.bubble': './assets/bubble.styl', + 'quill.snow': './assets/snow.styl', + 'unit.js': './test/unit.js', + }, + output: { + filename: '[name]', + library: 'Quill', + libraryExport: 'default', + libraryTarget: 'umd', + path: path.resolve(__dirname, '../dist/'), + }, + resolve: { + alias: { + parchment: path.resolve( + __dirname, + '../node_modules/parchment/src/parchment', + ), }, - }; + extensions: ['.js', '.styl', '.ts'], + }, + module: { + rules: [jsRules, stylRules, svgRules, tsRules], + noParse: [ + /\/node_modules\/clone\/clone\.js$/, + /\/node_modules\/eventemitter3\/index\.js$/, + /\/node_modules\/extend\/index\.js$/, + ], + }, + plugins: [ + bannerPack, + constantPack, + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + ], + devServer: { + contentBase: path.resolve(__dirname, '../dist'), + hot: false, + port: process.env.npm_package_config_ports_webpack, + stats: 'minimal', + disableHostCheck: true, + }, +}; +module.exports = env => { if (env && env.minimize) { - config.entry = { - 'quill.min.js': './quill.js', + const { devServer, ...prodConfig } = baseConfig; + return { + ...prodConfig, + mode: 'production', + entry: { 'quill.min.js': './quill.js' }, + devtool: 'source-map', }; - config.plugins.push( - new webpack.optimize.UglifyJsPlugin({ - sourceMap: true, - }), - ); - config.devtool = 'source-map'; - } - - if (env && env.coverage) { - config.module.rules[3].use[0].options.plugins = ['istanbul']; + } else if (env && env.coverage) { + baseConfig.module.rules[0].use[0].options.plugins = ['istanbul']; + return baseConfig; } - - return config; + return baseConfig; }; diff --git a/package.json b/package.json index 48316a814e..b258a2a968 100644 --- a/package.json +++ b/package.json @@ -48,12 +48,11 @@ "eslint": "^4.17.0", "eslint-config-airbnb": "^16.1.0", "eslint-config-prettier": "^2.9.0", - "eslint-import-resolver-webpack": "~0.8.4", + "eslint-import-resolver-webpack": "~0.10.0", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "^7.8.2", - "extract-text-webpack-plugin": "^3.0.2", "highlight.js": "^9.12.0", "html-loader": "~0.5.5", "http-proxy": "^1.17.0", @@ -64,18 +63,20 @@ "karma-jasmine": "^1.1.2", "karma-sauce-launcher": "^1.2.0", "lodash": "^4.17.10", + "mini-css-extract-plugin": "~0.4.0", "prettier": "^1.13.4", - "style-loader": "~0.20.1", + "style-loader": "~0.21.0", "stylus": "~0.54.5", "stylus-loader": "^3.0.1", - "ts-loader": "^3.4.0", + "ts-loader": "^4.3.1", "typescript": "^2.9.1", "wdio-jasmine-framework": "~0.3.4", "wdio-spec-reporter": "~0.1.3", "webdriver-manager": "^12.0.6", "webdriverio": "^4.10.2", - "webpack": "^3.10.0", - "webpack-dev-server": "^2.11.1" + "webpack": "^4.10.2", + "webpack-cli": "^3.0.1", + "webpack-dev-server": "^3.1.4" }, "license": "BSD-3-Clause", "repository": {