Skip to content

Instantly share code, notes, and snippets.

@Natumsol

Natumsol/index.html

Last active August 18, 2020 06:24
Show Gist options
  • Save Natumsol/34b3d27c305cf7ed6fbb8792738d211e to your computer and use it in GitHub Desktop.
Save Natumsol/34b3d27c305cf7ed6fbb8792738d211e to your computer and use it in GitHub Desktop.
Download ZIP
React 项目Webpack配置文件
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App</title>
<link rel="stylesheet" href="//alifd.alicdn.com/npm/@alife/theme-243/0.1.2/next.min.css">
<link rel="stylesheet" href="/<%=htmlWebpackPlugin.options.pageName%>.css">
<style>
#root {
margin: 20px;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="//i.alicdn.com/s/polyfill.min.js?features=default,es2017,es6,fetch,RegeneratorRuntime"></script>
<script
src="https://gw.alipayobjects.com/os/lib/??react/16.8.6/umd/react.development.js,react-dom/16.8.6/umd/react-dom.development.js,moment/2.24.0/min/moment-with-locales.js,alifd/next/1.20.28/dist/next-with-locales.js"></script>
<script src="/<%= htmlWebpackPlugin.options.pageName %>.js"></script>
<%if(htmlWebpackPlugin.options.mode === 'development') {%>
<script src="http://127.0.0.1:<%=htmlWebpackPlugin.options.websocktPort%>/livereload.js"></script>
<%}%>
</body>
</html>
Raw
package.json
{
"name": "@alife/demo",
"version": "1.0.0",
"description": "description",
"private": true,
"files": [
"example",
".build",
"src",
"README.md"
],
"scripts": {
"build": "npm run clean && cross-env NODE_ENV=production webpack",
"clean": "del-cli .build",
"pub": " git add --all && git commit -am 'chore(release): update' && git push origin master ",
"publish": " git add --all && git commit -am 'chore(release): update' && git push origin master ",
"dev": "npm run clean && webpack-dev-server ",
"lint": "eslint --fix '@(src|demo)/**/*.@(js|jsx)' 'webpack.config.js'",
"prepublish": "npm run lint && npm run build",
"prepub": "npm run lint && npm run build",
"watch": "npm run clean && webpack-dev-server "
},
"dependencies": {
"@alifd/next": "1.x",
"classnames": "^2.2.6",
"moment": "^2.22.2",
"prop-types": "^15.7.2"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-eslint": "^6.1.2",
"babel-loader": "^7.1.4",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-import": "^1.10.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-es6-displayname": "^1.0.0-beta1.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"cross-env": "^3.1.4",
"css-loader": "1.0.1",
"del-cli": "^1.1.0",
"eslint": "^7.7.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-import": "^1.12.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^5.2.2",
"fast-sass-loader": "^1.4.6",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "0.4.4",
"node-sass": "^4.14.1",
"open-browser-webpack-plugin": "0.0.5",
"optimize-css-assets-webpack-plugin": "5.0.1",
"portfinder": "1.0.20",
"progress-bar-webpack-plugin": "1.12.1",
"react": "^16.x",
"react-dom": "^16.x",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "2.1.2",
"webpack": "4.22.0",
"webpack-cli": "3.1.2",
"webpack-dev-server": "3.2.1",
"webpack-livereload-plugin": "2.1.1",
"webpackbar": "3.1.5"
},
"peerDependencies": {
"react": "^16.x",
"react-dom": "^16.x"
},
"entry": {
"home": "./src/pages/home/index.jsx",
"counter": "./src/pages/counter/index.jsx"
}
}
Raw
webpack.config.js
/* eslint-disable no-undef */
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const portfinder = require('portfinder');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const DEFAULT_SERVER_PORT = 2222;
const DEFAULT_WEBSOCKT_PORT = 2333;
const jsLoader = {
loader: 'babel-loader',
options: {
babelrc: false,
cacheDirectory: true,
compact: false,
comments: false,
presets: ['babel-preset-react', 'babel-preset-es2015', 'babel-preset-stage-0'].map(require.resolve),
plugins: [
require.resolve('babel-plugin-transform-react-es6-displayname'),
require.resolve('babel-plugin-transform-decorators-legacy'),
require.resolve('babel-plugin-add-module-exports'),
],
},
};
function getPort(config) {
return new Promise((resolve, reject) => {
portfinder.getPort(config, (err, port) => {
if (err) {
reject(err);
} else {
resolve(port);
}
});
});
}
async function getConfig() {
const serverPort = await getPort({ port: DEFAULT_SERVER_PORT });
const websocktPort = await getPort({ port: DEFAULT_WEBSOCKT_PORT });
const entry = {
home: ['./src/pages/home/index'],
counter: ['./src/pages/counter/index'],
}
return {
entry,
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
optimization: {
minimize: process.env.NODE_ENV === 'production',
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false, // set to true if you want JS source maps
}),
new OptimizeCssAssetsPlugin(),
],
},
output: {
path: path.join(__dirname, '.build'),
filename: '[name].js',
},
resolve: {
extensions: ['.js', '.json', '.jsx', '.css'],
modules: ['node_modules', 'node_modules/@alife'],
},
devtool: process.env.NODE_ENV === 'production' ? 'none' : 'inline-source-map',
devServer: {
stats: {
chunks: false,
colors: true,
modules: false,
},
contentBase: [path.join(__dirname, 'demo'), path.join(__dirname, '.build')],
compress: true,
host: '0.0.0.0',
port: serverPort,
},
module: {
rules: [{
test: /\.jsx?$/,
use: [jsLoader],
exclude: /node_modules/,
}, {
test: /\.css$/,
loader: [MiniCssExtractPlugin.loader, 'css-loader'],
}, {
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'fast-sass-loader'],
}],
},
externals: {
react: 'var window.React',
'react-dom': 'var window.ReactDOM',
moment: 'var window.moment',
'@alife/next': 'var window.Next',
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
new OpenBrowserPlugin({ url: `http://localhost:${serverPort}/home.html` }),
new LiveReloadPlugin({
port: `${websocktPort}`,
}),
new ProgressBarPlugin(),
...Object.keys(entry).map(pageName => {
return new HtmlWebpackPlugin({
filename: `${pageName}.html`,
template: path.join(__dirname, 'index.html'),
inject: false,
websocktPort,
pageName,
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
});
})
],
stats: {
warnings: false,
},
};
}
module.exports = getConfig();
Raw
目录层级
.
├── HISTORY.md
├── README.md
├── index.html
├── index.js
├── package.json
├── src
│ ├── components
│ │ └── counter
│ │ ├── index.jsx
│ │ └── index.scss
│ └── pages
│ ├── counter
│ │ ├── App.jsx
│ │ ├── index.jsx
│ │ └── index.scss
│ └── home
│ ├── App.jsx
│ └── index.jsx
└── webpack.config.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment