Skip to content

Instantly share code, notes, and snippets.

@sfengyuan

sfengyuan/.babelrc

Last active June 15, 2018 06:21
Show Gist options
  • Save sfengyuan/9750f9be5f31b2ef7fe8432b5a2efa98 to your computer and use it in GitHub Desktop.
Save sfengyuan/9750f9be5f31b2ef7fe8432b5a2efa98 to your computer and use it in GitHub Desktop.
Download ZIP
js config
Raw
.babelrc
{
"presets": [
[
"env",
{"modules": false}
],
["stage-3"]
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env"]
}
}
}
Raw
.eslintrc.json
{
"extends": "standard",
"env": {
"node": true,
"mocha": true,
"browser": true
},
"rules": {
"no-unused-vars": 0,
"no-alert": 0
}
}
Raw
.gitignore
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
*.cache
# dependencies
node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings
yarn-error.log
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db
Raw
devDependencies.json
["autoprefixer","babel-core","babel-loader","babel-plugin-transform-runtime","babel-preset-env","babel-preset-stage-3","babel-register","chai","compression-webpack-plugin","css-loader","eslint","eslint-config-standard","eslint-loader","eslint-plugin-import","eslint-plugin-node","eslint-plugin-promise","eslint-plugin-standard","file-loader","html-webpack-plugin","mini-css-extract-plugin","mocha","optimize-css-assets-webpack-plugin","postcss","postcss-loader","rimraf","style-loader","stylus","stylus-loader","uglifyjs-webpack-plugin","url-loader","webpack","webpack-cli","webpack-dev-server"]
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
Raw
main.styl
html
font-size 10px
font-family sans-serif
body
margin 0 auto
body *
box-sizing border-box
a
text-decoration none
ul, ol, dl
list-style-type none
padding 0
margin 0
input, button
appearance none
outline none
background none
border none
padding none
vertical-align baseline
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
select
appearance none
body
font-family -apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC','WenQuanYi Micro Hei',sans-serif
font-size 1.4rem
code
font-family 'Source Code Pro', Consolas, monospace
color #666
border-left 1px solid #333
background #eee
overflow auto
button:hover, a:hover
cursor pointer
body
background #222
Raw
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
Raw
scripts
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"build": "rimraf dist && webpack --mode production",
"test": "mocha test/**/*.js"
},
"browserslist": [
"last 2 versions",
"not ie <=8"
]
Raw
webpack.config.js
const path = require('path')
module.exports = {
output: {
publicPath: '/dist/'
},
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': path.join(__dirname, 'src')
}
},
module: {
rules: [
{
test: /\.styl(us)?$/,
use: ['style-loader', 'css-loader', 'stylus-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader',]
}
]
}
}
Raw
webpack.config.js2
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const path = require('path')
let config = {
output: {
path: path.join(__dirname, './dist'),
publicPath: '/'
},
resolve: {
alias: {
'@': path.join(__dirname, 'src')
}
},
devServer: {
noInfo: true
// publicPath: '/',
// historyApiFallback: true,
// proxy: {
// '/api': {
// target: 'http://localhost:3001',
// pathRewrite: { '^/api/v1/': '/' }
// }
// }
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
// If you referece image in html file, you need 'html-loader'
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:8].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:8].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name].[hash:8].[ext]'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
template: 'index.html'
})
]
}
let devConfig = {
module: {
rules: [
{
test: /\.styl$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
}
]
},
plugins: [
]
}
let proConfig = {
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader', 'postcss-loader'
]
},
{
test: /\.styl$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'stylus-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: `css/[name]_[hash:8].css`
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
}
module.exports = (env, argv) => {
if (argv.mode === 'production') {
config.module.rules = config.module.rules.concat(proConfig.module.rules)
config.plugins = config.plugins.concat(proConfig.plugins)
config.performance = { // performance budget default is 250kb
hints: 'warning', // 'error' or 'false' are valid too
maxEntrypointSize: 40000, // in bytes
maxAssetSize: 450000 // in bytes
}
config.optimization = {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
}
} else {
config.module.rules = config.module.rules.concat(devConfig.module.rules)
config.plugins = config.plugins.concat(devConfig.plugins)
}
return config
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment