提交 a3541a34 authored 作者: vipcxj's avatar vipcxj

roadhog依赖替换为webpack,基本完成。

上级 25975bfd
{
"presets": ["./tools/babel-preset"]
}
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
/.cache-loader
# dependencies # dependencies
/node_modules /node_modules
......
module.exports = require('./mock');
{ {
"presets": [ "presets": ["../tools/babel-preset"]
[
"umi",
{ "browsers": ["ie >= 9"] }
]
],
"plugins": [
"dva-hmr",
"lodash",
["import", { "libraryName": "antd", "style": true }]
]
} }
const createProxy = require('http-proxy-middleware');
require('../babel-register');
const createProxy = require('http-proxy-middleware');
const forEach = require('lodash/forEach'); const forEach = require('lodash/forEach');
const assert = require('assert'); require('../babel-register');
const proxy = require('../proxy');
const roadhog = require('../.webpackrc'); const mock = require('../mock');
const mock = require('../.roadhogrc.mock'); const applyMock = require('../tools/applyMock');
function parseKey(key) {
let method = 'get';
let path = key;
if (key.indexOf(' ') > -1) {
const splited = key.split(' ');
method = splited[0].toLowerCase();
path = splited[1];
}
return { method, path };
}
function makeProxy(method, path, target) {
const filter = (pathname, req) => {
return path.test(pathname) && req.method === method.toUpperCase();
};
return createProxy(filter, { target });
}
function createMockHandler(value) {
return function mockHandler(...args) {
const res = args[1];
if (typeof value === 'function') {
value(...args);
} else {
res.json(value);
}
};
}
module.exports = (router) => { module.exports = (app) => {
const proxy = roadhog.env.development.proxy;
forEach(proxy, (value, key) => { forEach(proxy, (value, key) => {
router.use(key, createProxy(key, value)); app.use(key, createProxy(key, value));
}); });
forEach(mock, (value, key) => { applyMock(app, mock);
const parsedkey = parseKey(key);
assert(
typeof value === 'function' ||
typeof value === 'object' ||
typeof value === 'string',
`mock value of ${key} should be function or object or string, but got ${typeof value}`
);
if (typeof value === 'string') {
let path = parsedkey.path;
if (/\(.+\)/.test(parsedkey.path)) {
path = new RegExp(`^${parsedkey.path}$`);
}
router.use(
path,
makeProxy(parsedkey.method, path, value)
);
} else {
router[parsedkey.method](
parsedkey.path,
createMockHandler(value)
);
}
})
}; };
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js'); let config;
const path = require('path');
module.exports = (baseConfig, env) => { if (process.env.NODE_ENV === 'production') {
const config = genDefaultConfig(baseConfig, env); config = require('../webpack.prod');
} else {
// Extend it as you need. config = require('../webpack.dev');
}
// For example, add typescript loader:
config.module.rules.push({
test: /\.less$/,
include: path.resolve(__dirname, '../src'),
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
},
},
require.resolve('less-loader')
],
}, {
test: /\.less$/,
exclude: path.resolve(__dirname, '../src'),
use: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('less-loader')
],
});
config.module.rules = config.module.rules.map(rule => { module.exports = (baseConfig, env) => {
if (`${rule.test}` === `${/\.md$/}`) { baseConfig.resolve.extensions = config.resolve.extensions;
return { baseConfig.module.rules = config.module.rules;
test: /\.md$/, return baseConfig;
use: [
require.resolve('html-loader'),
require.resolve('highlight-loader'),
require.resolve('markdown-loader'),
],
}
} else {
return rule;
}
});
return config;
}; };
const config = require('./config');
const proxy = {
target: "http://192.168.1.22:8080",
changeOrigin: true,
pathRewrite: {
"^/api": "/bm/api"
}
};
const resource_proxy = {
target: "http://192.168.1.22:8080",
changeOrigin: true,
pathRewrite: {
"^/resource": "/bm/resource"
}
};
module.exports = {
entry: "src/index.js",
html: {
title: 'base project',
template: "src/index.ejs",
},
theme: {
"layout-header-height": "48px",
"layout-header-background": "#fff",
"layout-footer-background": "#fff",
"layout-sider-background": '#404040',
'menu-dark-bg': '#404040',
"layout-header-padding": "0",
},
browserslist: ['ie >= 9'],
ignoreMomentLocale: true,
hash: true,
env: {
development: {
publicPath: config.dev.publicPath,
extraBabelPlugins: [
"dva-hmr",
"lodash",
["import", { "libraryName": "antd", "style": true }]
],
devtool: "cheap-module-eval-source-map",
proxy: {
"/api": proxy,
"/resource": resource_proxy,
}
},
production: {
publicPath: config.prod.publicPath,
extraBabelPlugins: [
"lodash",
["import", { "libraryName": "antd", "style": true }]
],
// devtool: "hidden-source-map"
}
}
};
/* eslint-disable comma-dangle */ /* eslint-disable comma-dangle */
const babel = require('@babel/register/lib/node'); const babel = require('@babel/register/lib/node');
const path = require('path');
babel.default(({ babel.default({
presets: [ presets: [
['umi', { browsers: ['ie >= 9'], commonjs: true }] ['./tools/babel-preset', {
modules: 'commonjs',
}],
], ],
plugins: [ babelrc: false,
'lodash', only: [
['import', { libraryName: 'antd', style: true }] path.resolve(__dirname, 'src/**'),
], path.resolve(__dirname, 'stories/**'),
})); path.resolve(__dirname, 'mock/**'),
]
});
// require('@babel/runtime');
module.exports = { module.exports = {
unregister() { unregister() {
...@@ -18,3 +25,4 @@ module.exports = { ...@@ -18,3 +25,4 @@ module.exports = {
}); });
}, },
}; };
/* eslint-disable */
exports.__esModule = true;
var _stringify = require("babel-runtime/core-js/json/stringify");
var _stringify2 = _interopRequireDefault(_stringify);
exports.save = save;
exports.load = load;
exports.get = get;
var _path = require("path");
var _path2 = _interopRequireDefault(_path);
var _fs = require("fs");
var _fs2 = _interopRequireDefault(_fs);
var _mkdirp = require("mkdirp");
var _homeOrTmp = require("home-or-tmp");
var _homeOrTmp2 = _interopRequireDefault(_homeOrTmp);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var FILENAME = process.env.BABEL_CACHE_PATH || _path2.default.join(_homeOrTmp2.default, ".babel.json");
var data = {};
function save() {
var serialised = "{}";
try {
serialised = (0, _stringify2.default)(data, null, " ");
} catch (err) {
if (err.message === "Invalid string length") {
err.message = "Cache too large so it's been cleared.";
console.error(err.stack);
} else {
throw err;
}
}
(0, _mkdirp.sync)(_path2.default.dirname(FILENAME));
_fs2.default.writeFileSync(FILENAME, serialised);
}
function load() {
if (process.env.BABEL_DISABLE_CACHE) return;
process.on("exit", save);
process.nextTick(save);
if (!_fs2.default.existsSync(FILENAME)) return;
try {
data = JSON.parse(_fs2.default.readFileSync(FILENAME));
} catch (err) {
return;
}
}
function get() {
return data;
}
/* eslint-disable no-shadow */ /* eslint-disable no-shadow */
import moment from 'moment'; import moment from 'moment';
import { genModules } from './src/mock/modules'; import { genModules } from '../src/mock/modules';
import { getTasks } from './src/mock/tasks'; import { getTasks } from '../src/mock/tasks';
import toFilters from './src/mock/filter'; import toFilters from '../src/mock/filter';
const modules = genModules(); const modules = genModules();
const tasks = getTasks(); const tasks = getTasks();
......
This source diff could not be displayed because it is too large. You can view the blob instead.
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"start": "roadhog dev", "start": "cross-env NODE_ENV=development webpack-dev-server --open --config webpack.dev.js",
"build": "cross-env ANALYZE=true roadhog build", "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js",
"test": "roadhog test --require ./test_setup.js", "test": "roadhog test --require ./test_setup.js",
"lint": "eslint --ext .js src test", "lint": "eslint --ext .js src test",
"precommit": "npm run lint", "precommit": "npm run lint",
"storybook": "start-storybook -p 6006", "storybook": "cross-env NODE_ENV=development start-storybook -p 6006",
"build-storybook": "build-storybook" "build-storybook": "cross-env NODE_ENV=production build-storybook"
}, },
"engines": { "engines": {
"install-node": "6.9.2" "install-node": "6.9.2"
}, },
"sideEffects": false,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.0.0-beta.44",
"antd": "^3.3.0", "antd": "^3.3.0",
"axo": "0.0.2", "axo": "0.0.2",
"bowser": "^1.8.1", "bowser": "^1.8.1",
...@@ -30,7 +32,7 @@ ...@@ -30,7 +32,7 @@
"moment": "^2.18.1", "moment": "^2.18.1",
"prop-types": "^15.6.1", "prop-types": "^15.6.1",
"react": "^16.2.0", "react": "^16.2.0",
"react-async-wrapper": "^0.1.4", "react-async-wrapper": "^0.1.6",
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"react-json-view": "^1.11.4", "react-json-view": "^1.11.4",
"react-markdown": "^3.3.0", "react-markdown": "^3.3.0",
...@@ -42,34 +44,88 @@ ...@@ -42,34 +44,88 @@
"xml2js": "^0.4.17" "xml2js": "^0.4.17"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0-beta.40", "@babel/core": "^7.0.0-beta.44",
"@babel/helper-plugin-utils": "^7.0.0-beta.44",
"@babel/plugin-proposal-async-generator-functions": "^7.0.0-beta.44",
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.44",
"@babel/plugin-proposal-decorators": "^7.0.0-beta.44",
"@babel/plugin-proposal-do-expressions": "^7.0.0-beta.44",
"@babel/plugin-proposal-export-default": "^7.0.0-beta.32",
"@babel/plugin-proposal-export-default-from": "^7.0.0-beta.44",
"@babel/plugin-proposal-export-namespace": "^7.0.0-beta.32",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0-beta.44",
"@babel/plugin-proposal-function-bind": "^7.0.0-beta.44",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-beta.44",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.44",
"@babel/plugin-proposal-optional-catch-binding": "^7.0.0-beta.44",
"@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.44",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0-beta.44",
"@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.44",
"@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.44",
"@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.44",
"@babel/plugin-transform-runtime": "^7.0.0-beta.44",
"@babel/polyfill": "^7.0.0-beta.44",
"@babel/preset-env": "^7.0.0-beta.44",
"@babel/preset-react": "^7.0.0-beta.44",
"@babel/register": "^7.0.0-beta.40", "@babel/register": "^7.0.0-beta.40",
"@storybook/addon-info": "^3.3.15", "@storybook/addon-actions": "^3.4.1",
"@storybook/react": "^3.3.15", "@storybook/addon-info": "^4.0.0-alpha.2",
"@storybook/addon-links": "^3.4.1",
"@storybook/react": "^4.0.0-alpha.2",
"@types/webpack": "^4.1.3",
"autoprefixer": "^8.2.0",
"awesome-typescript-loader": "^5.0.0",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.2", "babel-eslint": "^8.2.2",
"babel-loader": "^8.0.0-beta.2",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-dva-hmr": "^0.4.1", "babel-plugin-dva-hmr": "^0.4.1",
"babel-plugin-import": "^1.6.5", "babel-plugin-import": "^1.6.5",
"babel-plugin-lodash": "^3.3.2", "babel-plugin-lodash": "^3.3.2",
"bundle-loader": "^0.5.6", "babel-plugin-react-require": "^3.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
"cache-loader": "^1.2.2",
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"chai": "^4.0.2", "chai": "^4.0.2",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"cross-env": "^5.1.3", "cross-env": "^5.1.3",
"ejs-loader": "^0.3.1", "ejs-loader": "^0.3.1",
"enzyme": "^3.3.0", "enzyme": "^3.3.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0", "eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.10.0",
"eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-lodash-fp": "^2.1.3", "eslint-plugin-lodash-fp": "^2.1.3",
"eslint-plugin-react": "^7.7.0",
"highlight-loader": "^0.7.2", "highlight-loader": "^0.7.2",
"html-webpack-plugin": "latest",
"http-proxy-middleware": "^0.17.4", "http-proxy-middleware": "^0.17.4",
"jest": "^22.4.2", "jest": "^22.4.2",
"jsdom": "^11.0.0", "jsdom": "^11.0.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"lodash-webpack-plugin": "^0.11.4", "lodash-webpack-plugin": "^0.11.4",
"markdown-loader": "^2.0.2", "markdown-loader": "^2.0.2",
"mini-css-extract-plugin": "^0.4.0",
"mockjs": "^1.0.1-beta3", "mockjs": "^1.0.1-beta3",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"path": "^0.12.7", "path": "^0.12.7",
"postcss-flexbugs-fixes": "^3.3.0",
"raw-loader": "^0.5.1", "raw-loader": "^0.5.1",
"react-dev-utils": "^5.0.1",
"react-test-renderer": "^16.2.0", "react-test-renderer": "^16.2.0",
"redbox-react": "^1.5.0", "redbox-react": "^1.5.0",
"webpack": "^4.4.1" "style-loader": "^0.20.3",
"tslint-loader": "^3.6.0",
"uglifyjs-webpack-plugin": "^1.2.4",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-manifest-plugin": "^2.0.0",
"webpack-merge": "^4.1.2"
} }
} }
module.exports = {
plugins: {
'postcss-flexbugs-fixes': {},
autoprefixer: {
flexbox: 'no-2009',
},
},
};
const proxy = {
target: 'http://192.168.1.22:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/bm/api',
},
};
const resourceProxy = {
target: 'http://192.168.1.22:8080',
changeOrigin: true,
pathRewrite: {
'^/resource': '/bm/resource',
},
};
module.exports = {
'/api': proxy,
'/resource': resourceProxy,
};
...@@ -3,6 +3,7 @@ import React from 'react'; ...@@ -3,6 +3,7 @@ import React from 'react';
import partial from 'lodash/fp/partial'; import partial from 'lodash/fp/partial';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info'; import { withInfo } from '@storybook/addon-info';
import ReactMardDown from 'react-markdown';
import ReactJson from 'react-json-view'; import ReactJson from 'react-json-view';
import { DatePicker, Form, Input, Modal, Button } from 'antd'; import { DatePicker, Form, Input, Modal, Button } from 'antd';
...@@ -83,7 +84,4 @@ storiesOf('table-input', module) ...@@ -83,7 +84,4 @@ storiesOf('table-input', module)
}); });
storiesOf('markdown', module) storiesOf('markdown', module)
.add('test', () => (<div dangerouslySetInnerHTML={{ .add('test', () => (<ReactMardDown source={testMd} />));
__html: testMd,
}}
/>));
module.exports = {
'layout-header-height': '48px',
'layout-header-background': '#fff',
'layout-footer-background': '#fff',
'layout-sider-background': '#404040',
'menu-dark-bg': '#404040',
'layout-header-padding': '0',
};
const createProxy = require('http-proxy-middleware');
const forEach = require('lodash/forEach');
const assert = require('assert');
const parseKey = (key) => {
let method = 'get';
let path = key;
if (key.indexOf(' ') > -1) {
const splited = key.split(' ');
method = splited[0].toLowerCase();
path = splited[1];
}
return { method, path };
};
const makeProxy = (method, path, target) => {
const filter = (pathname, req) => {
return path.test(pathname) && req.method === method.toUpperCase();
};
return createProxy(filter, { target });
};
const createMockHandler = (value) => {
return function mockHandler(...args) {
const res = args[1];
if (typeof value === 'function') {
value(...args);
} else {
res.json(value);
}
};
};
module.exports = (app, mock) => {
forEach(mock, (value, key) => {
const parsedkey = parseKey(key);
assert(
typeof value === 'function' ||
typeof value === 'object' ||
typeof value === 'string',
`mock value of ${key} should be function or object or string, but got ${typeof value}`,
);
if (typeof value === 'string') {
let path = parsedkey.path;
if (/\(.+\)/.test(parsedkey.path)) {
path = new RegExp(`^${parsedkey.path}$`);
}
app.use(
path,
makeProxy(parsedkey.method, path, value),
);
} else {
app[parsedkey.method](
parsedkey.path,
createMockHandler(value),
);
}
});
};
const { declare } = require('@babel/helper-plugin-utils');
const plugins = [
'babel-plugin-react-require',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-optional-catch-binding',
'@babel/plugin-proposal-async-generator-functions',
'@babel/plugin-proposal-decorators',
['@babel/proposal-class-properties', {
loose: true,
}],
'@babel/plugin-proposal-export-namespace',
'@babel/plugin-proposal-export-default',
'@babel/plugin-proposal-export-namespace-from',
'@babel/plugin-proposal-export-default-from',
'@babel/plugin-proposal-nullish-coalescing-operator',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-pipeline-operator',
'@babel/plugin-proposal-do-expressions',
'@babel/plugin-proposal-function-bind',
'lodash',
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
];
if (process.env.NODE_ENV === 'production') {
plugins.push(
'dev-expression',
'@babel/plugin-transform-react-constant-elements',
'@babel/plugin-transform-react-inline-elements', // not supported by preact.
'transform-react-remove-prop-types',
);
}
if (process.env.NODE_ENV === 'development') {
plugins.push(
'dva-hmr',
);
}
if (process.env.NODE_ENV !== 'test') {
plugins.push(
'@babel/plugin-transform-runtime',
);
}
module.exports = declare(({ assertVersion }, options) => {
assertVersion(7);
return {
presets: [
[
'@babel/env',
{
targets: {
browsers: ['ie >= 9'],
},
modules: options.modules || false,
loose: true,
},
],
'@babel/react',
],
plugins,
};
});
/* eslint-disable no-param-reassign,global-require */
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { existsSync } = require('fs');
const theme = require('./theme');
let hasSassLoader = true;
try {
require.resolve('sass-loader');
} catch (e) {
hasSassLoader = false;
}
let supportTS = true;
try {
require.resolve('typescript');
} catch (e) {
supportTS = false;
}
const TARGET = process.env.npm_lifecycle_event;
if (!TARGET) {
// eslint-disable-next-line no-console
console.log('Please run this script through the npm.');
}
const isDev = TARGET !== 'build';
const outputPath = path.resolve(__dirname, 'dist');
let copyPlugins = [];
if (existsSync(path.resolve(__dirname, 'public'))) {
copyPlugins = [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, 'public'),
to: outputPath,
toType: 'dir',
},
]),
];
}
const cssLoader = module => [
{
loader: 'css-loader',
options: {
importLoaders: 1,
...(isDev
? {}
: {
minimize: {
minifyFontValues: false,
},
sourceMap: true,
}),
...(!module
? {}
: {
module,
localIdentName: isDev
? '[name]__[local]___[hash:base64:5]'
: '[local]___[hash:base64:5]',
}),
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: isDev,
},
},
];
const lessLoader = {
loader: 'less-loader',
options: {
modifyVars: theme,
javascriptEnabled: true,
},
};
const sassLoader = {
loader: 'sass-loader',
};
const cssRules = [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
// 'style-loader',
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
...cssLoader(true),
],
},
{
test: /\.css$/,
include: /node_modules/,
use: [
// 'style-loader',
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
...cssLoader(false),
],
},
{
test: /\.less$/,
exclude: /node_modules/,
use: [
// 'style-loader',
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
...cssLoader(true),
lessLoader,
],
},
{
test: /\.less$/,
include: /node_modules/,
use: [
// 'style-loader',
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
...cssLoader(false),
lessLoader,
],
},
...(!hasSassLoader
? []
: [
{
test: /\.sass$/,
exclude: /node_modules/,
use: [
// 'style-loader',
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
...cssLoader(true),
sassLoader,
],
},
{
test: /\.sass$/,
include: /node_modules/,
use: [
// 'style-loader',
isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
...cssLoader(false),
sassLoader,
],
},
]),
];
const config = {
context: path.resolve(__dirname),
entry: {
main: './src/index.js',
},
output: {
path: outputPath,
},
resolve: {
extensions: [
'.web.js',
'.web.jsx',
'.web.ts',
'.web.tsx',
'.js',
'.json',
'.jsx',
'.ts',
'.tsx',
],
plugins: [
...(!supportTS
? []
: [
new (require('awesome-typescript-loader').TsConfigPathsPlugin)(),
]),
],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader',
options: {
emitErrors: true,
},
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'eslint-loader',
},
{
exclude: [
/\.(html|ejs)$/,
/\.json$/,
/\.(js|jsx|ts|tsx)$/,
/\.(css|less|scss|sass)$/,
/\.md$/,
],
loader: 'url-loader',
options: {
limit: 8192,
name: 'static/[name].[hash:8].[ext]',
},
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'cache-loader',
'babel-loader',
],
},
{
test: /\.md$/,
loader: 'raw-loader',
},
...(!supportTS
? []
: [{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: [
'cache-loader',
'babel-loader',
{
loader: 'awesome-typescript-loader',
options: {
useTranspileModule: true,
},
},
],
}]),
{
test: /\.html$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
...cssRules,
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new CaseSensitivePathsPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new HtmlWebpackPlugin({
template: 'src/index.ejs',
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
...copyPlugins,
],
};
module.exports = config;
/* eslint-disable no-param-reassign */
const path = require('path');
const omit = require('lodash/omit');
const isFunction = require('lodash/isFunction');
const isUndefined = require('lodash/isUndefined');
const isObject = require('lodash/isObject');
const isEmpty = require('lodash/isEmpty');
const isArray = require('lodash/isArray');
const iteratee = require('lodash/iteratee');
const flatten = require('lodash/flatten');
const includes = require('lodash/includes');
const transform = require('lodash/transform');
const inspect = require('util').inspect;
const writeFileSync = require('fs').writeFileSync;
function pickDeep(collection, ...args) {
let predicate = args[0];
if (isFunction(predicate)) {
predicate = iteratee(predicate);
} else {
const keys = flatten(args);
predicate = (val, key) => {
return includes(keys, key);
};
}
return transform(collection, (memo, val, key) => {
let include = predicate(val, key);
if (include && (isObject(val) || isArray(val))) {
val = pickDeep(val, predicate);
include = !isEmpty(val);
}
if (include) {
if (isArray(collection)) {
memo.push(val);
} else {
memo[key] = val;
}
}
});
}
module.exports = function webpack(config) {
config.module.rules.push({
test: /\.ejs$/,
loader: require.resolve('ejs-loader'),
});
config.module.rules = config.module.rules.map((rule) => {
if (!rule.test && rule.exclude) {
rule.exclude = [...rule.exclude, /\.md$/];
}
return rule;
});
config.module.rules.push({
test: /\.md$/,
use: [
// require.resolve('html-loader'),
// require.resolve('highlight-loader'),
require.resolve('raw-loader'),
],
});
// console.log(config.module.rules);
let cleanedConfig = omit(config, 'plugins');
cleanedConfig.resolve = omit(cleanedConfig.resolve, 'plugins');
cleanedConfig = pickDeep(cleanedConfig, v => !isFunction(v) && !isUndefined(v));
writeFileSync(path.resolve(__dirname, 'webpack/webpack.config.js'), `module.exports = ${inspect(cleanedConfig, false, null)};`);
return config;
};
const config = require('./config');
const webpack = require('webpack');
const merge = require('webpack-merge');
const applyMock = require('./tools/applyMock');
const common = require('./webpack.common.js');
const proxy = require('./proxy');
const register = require('./babel-register');
const mock = require('./mock');
register.unregister();
module.exports = merge(common, {
output: {
publicPath: config.dev.publicPath,
filename: '[name].js',
chunkFilename: '[name].async.js',
pathinfo: true,
},
mode: 'development',
devtool: 'inline-source-map',
devServer: {
disableHostCheck: true,
publicPath: config.dev.publicPath,
hot: true,
compress: true,
progress: true,
historyApiFallback: true,
proxy,
headers: {
'access-control-allow-origin': '*',
},
watchOptions: {
ignored: /node_modules/,
},
after(app) {
applyMock(app, mock);
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
});
const config = require('./config');
const common = require('./webpack.common.js');
const webpack = require('webpack');
const merge = require('webpack-merge');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = merge(common, {
output: {
publicPath: config.prod.publicPath,
filename: '[name].[chunkhash:8].js',
chunkFilename: '[name].[chunkhash:8].async.js',
},
mode: 'production',
plugins: [
new webpack.HashedModuleIdsPlugin(),
new ManifestPlugin({
publicPath: config.prod.publicPath,
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css',
allChunks: true,
}),
new BundleAnalyzerPlugin(),
],
optimization: {
concatenateModules: true,
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true,
uglifyOptions: {
output: {
ascii_only: true,
},
},
}),
new OptimizeCSSAssetsPlugin({}),
],
},
});
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论