From b268d610f655b526feb25e39f74809ca83c25b58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=BD=A6?= Date: Tue, 19 Mar 2019 14:51:19 +0800 Subject: [PATCH 1/2] build: Since webpack >= v2.0.0, importing of JSON files will work by default --- packages/rax-cli/src/generator/miniapp/README.md | 7 +------ packages/rax-cli/src/generator/webapp/README.md | 2 +- packages/rax-cli/src/generator/weexapp/README.md | 2 +- packages/rax-scripts/package.json | 1 - .../src/config/webapp/webpack.config.base.js | 10 ---------- .../src/config/weexapp/webpack.config.base.js | 10 ---------- 6 files changed, 3 insertions(+), 29 deletions(-) diff --git a/packages/rax-cli/src/generator/miniapp/README.md b/packages/rax-cli/src/generator/miniapp/README.md index cb2dab3ba9..8ccf8252ea 100644 --- a/packages/rax-cli/src/generator/miniapp/README.md +++ b/packages/rax-cli/src/generator/miniapp/README.md @@ -1,4 +1,4 @@ -# rax-starter-kit +# MiniApp Starter Kit ## Getting Started @@ -17,8 +17,3 @@ You will see the lint errors in the console. ### `npm run build` Builds the app for production to the `build` folder. - -## Universal "Gotchas" - -- DOM & DOM like **`window`** & **`document`** do not exist on the server - so using them, or any library that uses them (jQuery for example) will not work. -- If you need to use them, consider limiting them to wrapping them situationally with the imported *isWeb / isNode / isWeex* features from Universal. `import {isWeb, isWeex, isNode} from 'universal-env'`; diff --git a/packages/rax-cli/src/generator/webapp/README.md b/packages/rax-cli/src/generator/webapp/README.md index ba907cec24..5cc5442a8c 100644 --- a/packages/rax-cli/src/generator/webapp/README.md +++ b/packages/rax-cli/src/generator/webapp/README.md @@ -1,4 +1,4 @@ -# rax-starter-kit +# WebApp Starter Kit ## Getting Started diff --git a/packages/rax-cli/src/generator/weexapp/README.md b/packages/rax-cli/src/generator/weexapp/README.md index ba907cec24..645643a80f 100644 --- a/packages/rax-cli/src/generator/weexapp/README.md +++ b/packages/rax-cli/src/generator/weexapp/README.md @@ -1,4 +1,4 @@ -# rax-starter-kit +# WeexApp Starter Kit ## Getting Started diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json index f6d9b09ece..acf5e9ed2f 100644 --- a/packages/rax-scripts/package.json +++ b/packages/rax-scripts/package.json @@ -51,7 +51,6 @@ "html-webpack-plugin": "^3.2.0", "image-source-loader": "^0.6.5", "internal-ip": "^3.0.1", - "json-loader": "^0.5.7", "loader-utils": "^1.1.0", "minimatch": "^3.0.4", "path-exists": "^3.0.0", diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.base.js b/packages/rax-scripts/src/config/webapp/webpack.config.base.js index 03f5f74a76..06482bd88f 100644 --- a/packages/rax-scripts/src/config/webapp/webpack.config.base.js +++ b/packages/rax-scripts/src/config/webapp/webpack.config.base.js @@ -65,16 +65,6 @@ module.exports = { }, ], }, - // JSON is not enabled by default in Webpack but both Node and Browserify - // allow it implicitly so we also enable it. - { - test: /\.json$/, - use: [ - { - loader: require.resolve('json-loader'), - }, - ], - }, // load inline images using image-source-loader for Image { test: /\.(svg|png|webp|jpe?g|gif)$/i, diff --git a/packages/rax-scripts/src/config/weexapp/webpack.config.base.js b/packages/rax-scripts/src/config/weexapp/webpack.config.base.js index e03301337d..3d35999296 100644 --- a/packages/rax-scripts/src/config/weexapp/webpack.config.base.js +++ b/packages/rax-scripts/src/config/weexapp/webpack.config.base.js @@ -63,16 +63,6 @@ module.exports = { }, ], }, - // JSON is not enabled by default in Webpack but both Node and Browserify - // allow it implicitly so we also enable it. - { - test: /\.json$/, - use: [ - { - loader: require.resolve('json-loader'), - }, - ], - }, // load inline images using image-source-loader for Image { test: /\.(svg|png|webp|jpe?g|gif)$/i, From adea9d82e383945a2bb2b7e110eb10facba832aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=BD=A6?= Date: Wed, 20 Mar 2019 12:12:57 +0800 Subject: [PATCH 2/2] chore: post processing css in webapp --- packages/rax-cli/package.json | 2 +- .../src/generator/miniapp/package.json | 2 +- .../rax-cli/src/generator/webapp/README.md | 5 ++++ .../rax-cli/src/generator/webapp/package.json | 6 +++- .../src/generator/weexapp/package.json | 2 +- packages/rax-scripts/package.json | 7 +++-- .../src/config/webapp/webpack.config.base.js | 30 +++++++++++++++---- .../src/config/webapp/webpack.config.prod.js | 17 +++++++---- 8 files changed, 54 insertions(+), 17 deletions(-) diff --git a/packages/rax-cli/package.json b/packages/rax-cli/package.json index 78359c3a5f..7f2dbd8bcc 100644 --- a/packages/rax-cli/package.json +++ b/packages/rax-cli/package.json @@ -1,6 +1,6 @@ { "name": "rax-cli", - "version": "1.1.0", + "version": "1.2.0", "license": "BSD-3-Clause", "description": "Command line interface for Rax", "main": "src/index.js", diff --git a/packages/rax-cli/src/generator/miniapp/package.json b/packages/rax-cli/src/generator/miniapp/package.json index 3bbd352f5e..aae608973d 100644 --- a/packages/rax-cli/src/generator/miniapp/package.json +++ b/packages/rax-cli/src/generator/miniapp/package.json @@ -11,7 +11,7 @@ "rax": "^1.0.0" }, "devDependencies": { - "rax-scripts": "^1.1.0", + "rax-scripts": "^1.2.0", "eslint": "^5.15.1", "babel-eslint": "^10.0.1" } diff --git a/packages/rax-cli/src/generator/webapp/README.md b/packages/rax-cli/src/generator/webapp/README.md index 5cc5442a8c..f1f32eebc9 100644 --- a/packages/rax-cli/src/generator/webapp/README.md +++ b/packages/rax-cli/src/generator/webapp/README.md @@ -17,3 +17,8 @@ You will see the lint errors in the console. ### `npm run build` Builds the app for production to the `build` folder. + + +## Post-Processing CSS + +You can customize your target support browsers by adjusting the `browserslist` key in `package.json` according to the [Browserslist specification](https://github.com/browserslist/browserslist#readme). \ No newline at end of file diff --git a/packages/rax-cli/src/generator/webapp/package.json b/packages/rax-cli/src/generator/webapp/package.json index 2cfce9f605..3d0f13baad 100644 --- a/packages/rax-cli/src/generator/webapp/package.json +++ b/packages/rax-cli/src/generator/webapp/package.json @@ -2,6 +2,10 @@ "name": "__YourProjectName__", "author": "__AuthorName__", "version": "0.0.0", + "browserslist": [ + "last 1 version", + "> 1%" + ], "scripts": { "start": "rax-scripts start", "build": "rax-scripts build", @@ -12,7 +16,7 @@ "driver-dom": "^1.0.0" }, "devDependencies": { - "rax-scripts": "^1.1.0", + "rax-scripts": "^1.2.0", "eslint": "^5.15.1", "babel-eslint": "^10.0.1", "eslint-plugin-react": "^7.12.4" diff --git a/packages/rax-cli/src/generator/weexapp/package.json b/packages/rax-cli/src/generator/weexapp/package.json index 73b1677d94..380a1ef3d2 100644 --- a/packages/rax-cli/src/generator/weexapp/package.json +++ b/packages/rax-cli/src/generator/weexapp/package.json @@ -12,7 +12,7 @@ "driver-weex": "^1.0.0" }, "devDependencies": { - "rax-scripts": "^1.1.0", + "rax-scripts": "^1.2.0", "eslint": "^5.15.1", "babel-eslint": "^10.0.1", "eslint-plugin-react": "^7.12.4" diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json index acf5e9ed2f..4a66505c3a 100644 --- a/packages/rax-scripts/package.json +++ b/packages/rax-scripts/package.json @@ -1,6 +1,6 @@ { "name": "rax-scripts", - "version": "1.1.0", + "version": "1.2.0", "license": "BSD-3-Clause", "description": "Project scripts for Rax.", "bin": { @@ -44,7 +44,7 @@ "commander": "^2.19.0", "copy-webpack-plugin": "^4.6.0", "cross-spawn": "^6.0.5", - "css-loader": "^2.1.0", + "css-loader": "^2.1.1", "decamelize": "^2.0.0", "file-loader": "^2.0.0", "glob": "^7.1.3", @@ -52,10 +52,13 @@ "image-source-loader": "^0.6.5", "internal-ip": "^3.0.1", "loader-utils": "^1.1.0", + "mini-css-extract-plugin": "^0.5.0", "minimatch": "^3.0.4", + "optimize-css-assets-webpack-plugin": "^5.0.1", "path-exists": "^3.0.0", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", + "postcss-preset-env": "^6.6.0", "rax-hot-loader": "^0.6.5", "rax-hot-module-replacement-webpack-plugin": "^0.6.5", "rax-webpack-plugin": "^0.6.5", diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.base.js b/packages/rax-scripts/src/config/webapp/webpack.config.base.js index 06482bd88f..dcd861760d 100644 --- a/packages/rax-scripts/src/config/webapp/webpack.config.base.js +++ b/packages/rax-scripts/src/config/webapp/webpack.config.base.js @@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpackConfig = require('../webpack.config'); const pathConfig = require('../path.config'); const babelConfig = require('../babel.config'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); babelConfig.presets.push([ require.resolve('@babel/preset-react'), { @@ -13,10 +14,6 @@ babelConfig.presets.push([ } ]); -babelConfig.plugins.push( - require.resolve('babel-plugin-transform-jsx-stylesheet') -); - module.exports = { mode: webpackConfig.mode, context: webpackConfig.context, @@ -32,6 +29,10 @@ module.exports = { inject: true, template: pathConfig.appHtml, }), + new MiniCssExtractPlugin({ + filename: 'css/[name].css', + chunkFilename: 'css/[id].css', + }), webpackConfig.plugins.define, webpackConfig.plugins.caseSensitivePaths, process.env.ANALYZER ? new BundleAnalyzerPlugin() : null, @@ -61,9 +62,26 @@ module.exports = { test: /\.css$/, use: [ { - loader: require.resolve('stylesheet-loader'), + loader: MiniCssExtractPlugin.loader, }, - ], + { + loader: require.resolve('css-loader'), + }, + { + loader: require.resolve('postcss-loader'), + options: { + ident: 'postcss', + plugins: () => [ + require('postcss-preset-env')({ + autoprefixer: { + flexbox: 'no-2009', + }, + stage: 3, + }), + ], + } + }, + ] }, // load inline images using image-source-loader for Image { diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.prod.js b/packages/rax-scripts/src/config/webapp/webpack.config.prod.js index af016c140d..8f99c19dac 100644 --- a/packages/rax-scripts/src/config/webapp/webpack.config.prod.js +++ b/packages/rax-scripts/src/config/webapp/webpack.config.prod.js @@ -4,6 +4,7 @@ const pathConfig = require('../path.config'); const webpackMerge = require('webpack-merge'); const webpackConfigBase = require('./webpack.config.base'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); +const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const webpackConfigProd = webpackMerge(webpackConfigBase, { target: 'node', @@ -13,11 +14,17 @@ const webpackConfigProd = webpackMerge(webpackConfigBase, { }, optimization: { minimize: true, - minimizer: [new UglifyJSPlugin({ - include: /\.min\.js$/, - cache: true, - sourceMap: true, - })] + minimizer: [ + new UglifyJSPlugin({ + include: /\.min\.js$/, + cache: true, + sourceMap: true, + }), + new OptimizeCSSAssetsPlugin({ + // A boolean indicating if the plugin can print messages to the console + canPrint: true + }) + ] }, });