Last active
February 22, 2018 19:38
-
-
Save hanxue/e395d04d0d316d2f587174f5ebc91b74 to your computer and use it in GitHub Desktop.
Webpack 4 eslint-loader issue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
const merge = require('webpack-merge') | |
const prodEnv = require('./prod.env') | |
module.exports = merge(prodEnv, { | |
NODE_ENV: '"development"' | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
// Template version: 1.2.8 | |
// see http://vuejs-templates.github.io/webpack for documentation. | |
const path = require('path') | |
module.exports = { | |
dev: { | |
// Paths | |
assetsSubDirectory: 'static', | |
assetsPublicPath: '/', | |
proxyTable: {}, | |
// Various Dev Server settings | |
host: 'localhost', // can be overwritten by process.env.HOST | |
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined | |
autoOpenBrowser: false, | |
errorOverlay: true, | |
notifyOnErrors: true, | |
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- | |
// Use Eslint Loader? | |
// If true, your code will be linted during bundling and | |
// linting errors and warnings will be shown in the console. | |
// Temporarily disable due to Webpack 4 | |
// See https://github.com/webpack-contrib/eslint-loader/issues/204 | |
useEslint: false, | |
// If true, eslint errors and warnings will also be shown in the error overlay | |
// in the browser. | |
showEslintErrorsInOverlay: false, | |
/** | |
* Source Maps | |
*/ | |
// https://webpack.js.org/configuration/devtool/#development | |
devtool: 'cheap-module-eval-source-map', | |
// If you have problems debugging vue-files in devtools, | |
// set this to false - it *may* help | |
// https://vue-loader.vuejs.org/en/options.html#cachebusting | |
cacheBusting: true, | |
cssSourceMap: true, | |
}, | |
build: { | |
// Template for index.html | |
index: path.resolve(__dirname, '../dist/index.html'), | |
// Paths | |
assetsRoot: path.resolve(__dirname, '../dist'), | |
assetsSubDirectory: 'static', | |
assetsPublicPath: '/', | |
/** | |
* Source Maps | |
*/ | |
productionSourceMap: true, | |
// https://webpack.js.org/configuration/devtool/#production | |
devtool: '#source-map', | |
// Gzip off by default as many popular static hosts such as | |
// Surge or Netlify already gzip all static assets for you. | |
// Before setting to `true`, make sure to: | |
// npm install --save-dev compression-webpack-plugin | |
productionGzip: false, | |
productionGzipExtensions: ['js', 'css'], | |
// Run the build command with an extra argument to | |
// View the bundle analyzer report after build finishes: | |
// `npm run build --report` | |
// Set to `true` or `false` to always turn it on or off | |
bundleAnalyzerReport: process.env.npm_config_report | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "abc", | |
"version": "0.1.0", | |
"description": "My App", | |
"author": "Lee Hanxue <hanxue@ibm.com>", | |
"private": true, | |
"scripts": { | |
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", | |
"start": "npm run dev", | |
"unit": "jest --config test/unit/jest.conf.js --coverage", | |
"e2e": "node test/e2e/runner.js", | |
"test": "npm run unit && npm run e2e", | |
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs", | |
"build": "node build/build.js" | |
}, | |
"dependencies": { | |
"accounting": "^0.4.1", | |
"chart.js": "^2.7.1", | |
"handsontable": "^0.35.0", | |
"node-sass": "^4.7.2", | |
"semantic-ui-css": "^2.2.12", | |
"vue": "^2.5.2", | |
"vue-chartjs": "^3.1.1", | |
"vue-handsontable-official": "^1.0.0", | |
"vue-material": "^1.0.0-beta-7", | |
"vue-router": "^3.0.1", | |
"vuelidate": "^0.6.1", | |
"vuetable-2": "^1.7.2" | |
}, | |
"devDependencies": { | |
"autoprefixer": "^7.1.2", | |
"babel-core": "^6.22.1", | |
"babel-eslint": "^8.2.2", | |
"babel-helper-vue-jsx-merge-props": "^2.0.3", | |
"babel-jest": "^21.0.2", | |
"babel-loader": "^7.1.1", | |
"babel-plugin-dynamic-import-node": "^1.2.0", | |
"babel-plugin-syntax-jsx": "^6.18.0", | |
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", | |
"babel-plugin-transform-runtime": "^6.22.0", | |
"babel-plugin-transform-vue-jsx": "^3.5.0", | |
"babel-preset-env": "^1.3.2", | |
"babel-preset-es2015": "^6.24.1", | |
"babel-preset-stage-2": "^6.24.1", | |
"babel-register": "^6.22.0", | |
"chalk": "^2.0.1", | |
"chromedriver": "^2.27.2", | |
"clean-webpack-plugin": "^0.1.17", | |
"copy-webpack-plugin": "^4.4.1", | |
"cross-spawn": "^5.0.1", | |
"css-loader": "^0.28.8", | |
"eslint": "^4.18.1", | |
"eslint-config-airbnb-base": "^11.3.0", | |
"eslint-friendly-formatter": "^3.0.0", | |
"eslint-import-resolver-webpack": "^0.8.3", | |
"eslint-loader": "^1.7.1", | |
"eslint-plugin-html": "^3.0.0", | |
"eslint-plugin-import": "^2.7.0", | |
"eslint-plugin-vue": "^4.0.1", | |
"extract-text-webpack-plugin": "^4.0.0-alpha.0", | |
"file-loader": "^1.1.4", | |
"friendly-errors-webpack-plugin": "^1.6.1", | |
"html-webpack-plugin": "git://github.com/Graham42/html-webpack-plugin.git#feat/webpack-4", | |
"inline-chunk-manifest-html-webpack-plugin": "^2.0.0", | |
"jest": "^21.2.0", | |
"jest-serializer-vue": "^0.3.0", | |
"nightwatch": "^0.9.12", | |
"node-notifier": "^5.1.2", | |
"npm-install-webpack-plugin": "^4.0.5", | |
"npm-install-webpack2-plugin": "^5.0.1", | |
"optimize-css-assets-webpack-plugin": "^3.2.0", | |
"ora": "^1.2.0", | |
"portfinder": "^1.0.13", | |
"postcss-import": "^11.0.0", | |
"postcss-loader": "^2.0.8", | |
"postcss-url": "^7.2.1", | |
"rimraf": "^2.6.0", | |
"sass-loader": "^6.0.6", | |
"selenium-server": "^3.0.1", | |
"semver": "^5.3.0", | |
"shelljs": "^0.7.6", | |
"tapable": "^1.0.0", | |
"uglifyjs-webpack-plugin": "^1.2.0", | |
"url-loader": "^0.6.2", | |
"vue-jest": "^2.1.0", | |
"vue-loader": "^14.1.1", | |
"vue-style-loader": "^4.0.2", | |
"vue-template-compiler": "^2.5.2", | |
"webpack": "^4.0.0-beta.2", | |
"webpack-bundle-analyzer": "^2.10.0", | |
"webpack-chunk-hash": "^0.5.0", | |
"webpack-cli": "^2.0.6", | |
"webpack-dev-server": "^3.0.0-beta.2", | |
"webpack-manifest-plugin": "^1.3.2", | |
"webpack-merge": "^4.1.0" | |
}, | |
"engines": { | |
"node": ">= 6.0.0", | |
"npm": ">= 3.0.0" | |
}, | |
"browserslist": [ | |
"> 1%", | |
"last 2 versions", | |
"not ie <= 8" | |
] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
module.exports = { | |
NODE_ENV: '"production"' | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
const merge = require('webpack-merge') | |
const devEnv = require('./dev.env') | |
module.exports = merge(devEnv, { | |
NODE_ENV: '"testing"' | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
const utils = require('./utils') | |
const config = require('../config') | |
const isProduction = process.env.NODE_ENV === 'production' | |
const sourceMapEnabled = isProduction | |
? config.build.productionSourceMap | |
: config.dev.cssSourceMap | |
module.exports = { | |
// module: { | |
// rules: [ | |
// { | |
// test: /\.css$/, | |
// use: [ 'style-loader', 'css-loader' ] | |
// } | |
// ] | |
// }, | |
loaders: utils.cssLoaders({ | |
sourceMap: sourceMapEnabled, | |
extract: isProduction | |
}), | |
loaders: { | |
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map | |
// the "scss" and "sass" values for the lang attribute to the right configs here. | |
// other preprocessors should work out of the box, no loader config like this necessary. | |
'scss': 'vue-style-loader!css-loader!sass-loader', | |
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' | |
}, | |
cssSourceMap: sourceMapEnabled, | |
cacheBusting: config.dev.cacheBusting, | |
transformToRequire: { | |
video: ['src', 'poster'], | |
source: 'src', | |
img: 'src', | |
image: 'xlink:href' | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
const path = require('path') | |
const utils = require('./utils') | |
const config = require('../config') | |
const vueLoaderConfig = require('./vue-loader.conf') | |
function resolve (dir) { | |
return path.join(__dirname, '..', dir) | |
} | |
const createLintingRule = () => ({ | |
test: /\.(js|vue)$/, | |
loader: 'eslint-loader', | |
enforce: 'pre', | |
include: [resolve('src'), resolve('test')], | |
options: { | |
formatter: require('eslint-friendly-formatter'), | |
emitWarning: !config.dev.showEslintErrorsInOverlay | |
} | |
}) | |
module.exports = { | |
context: path.resolve(__dirname, '../'), | |
entry: { | |
app: './src/main.js' | |
}, | |
output: { | |
path: config.build.assetsRoot, | |
filename: '[name].js', | |
publicPath: process.env.NODE_ENV === 'production' | |
? config.build.assetsPublicPath | |
: config.dev.assetsPublicPath | |
}, | |
resolve: { | |
extensions: ['.js', '.vue', '.json'], | |
alias: { | |
'vue$': 'vue/dist/vue.esm.js', | |
'@': resolve('src'), | |
} | |
}, | |
module: { | |
rules: [ | |
...(config.dev.useEslint ? [createLintingRule()] : []), | |
{ | |
test: /\.vue$/, | |
loader: 'vue-loader', | |
options: vueLoaderConfig | |
}, | |
{ | |
test: /\.js$/, | |
loader: 'babel-loader', | |
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] | |
}, | |
{ | |
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
name: utils.assetsPath('img/[name].[hash:7].[ext]') | |
} | |
}, | |
{ | |
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
name: utils.assetsPath('media/[name].[hash:7].[ext]') | |
} | |
}, | |
{ | |
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, | |
loader: 'url-loader', | |
options: { | |
limit: 10000, | |
name: utils.assetsPath('fonts/[name].[hash:7].[ext]') | |
} | |
} | |
] | |
}, | |
node: { | |
// prevent webpack from injecting useless setImmediate polyfill because Vue | |
// source contains it (although only uses it if it's native). | |
setImmediate: false, | |
// prevent webpack from injecting mocks to Node native modules | |
// that does not make sense for the client | |
dgram: 'empty', | |
fs: 'empty', | |
net: 'empty', | |
tls: 'empty', | |
child_process: 'empty' | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
const utils = require('./utils') | |
const webpack = require('webpack') | |
const config = require('../config') | |
const merge = require('webpack-merge') | |
const path = require('path') | |
const baseWebpackConfig = require('./webpack.base.conf') | |
const CopyWebpackPlugin = require('copy-webpack-plugin') | |
const HtmlWebpackPlugin = require('html-webpack-plugin') | |
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') | |
const NpmInstallPlugin = require('npm-install-webpack-plugin') | |
const portfinder = require('portfinder') | |
const HOST = process.env.HOST | |
const PORT = process.env.PORT && Number(process.env.PORT) | |
const devWebpackConfig = merge(baseWebpackConfig, { | |
module: { | |
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) | |
}, | |
// cheap-module-eval-source-map is faster for development | |
devtool: config.dev.devtool, | |
// these devServer options should be customized in /config/index.js | |
devServer: { | |
host: '0.0.0.0', | |
// disableHostCheck: true, | |
clientLogLevel: 'warning', | |
historyApiFallback: { | |
rewrites: [ | |
{ from: /.*/, to: path.join(config.dev.assetsPublicPath, 'index.html') }, | |
], | |
}, | |
hot: true, | |
contentBase: false, // since we use CopyWebpackPlugin. | |
compress: true, | |
host: HOST || config.dev.host, | |
port: PORT || config.dev.port, | |
open: config.dev.autoOpenBrowser, | |
overlay: config.dev.errorOverlay | |
? { warnings: false, errors: true } | |
: false, | |
publicPath: config.dev.assetsPublicPath, | |
proxy: config.dev.proxyTable, | |
quiet: true, // necessary for FriendlyErrorsPlugin | |
watchOptions: { | |
poll: config.dev.poll, | |
} | |
}, | |
mode: "development", | |
plugins: [ | |
new webpack.DefinePlugin({ | |
'process.env': require('../config/dev.env') | |
}), | |
new webpack.HotModuleReplacementPlugin(), | |
new webpack.NoEmitOnErrorsPlugin(), | |
// https://github.com/ampedandwired/html-webpack-plugin | |
new HtmlWebpackPlugin({ | |
filename: 'index.html', | |
template: 'index.html', | |
inject: true | |
}), | |
// copy custom static assets | |
new CopyWebpackPlugin([ | |
{ | |
from: path.resolve(__dirname, '../static'), | |
to: config.dev.assetsSubDirectory, | |
ignore: ['.*'] | |
} | |
]), | |
// Temporarily disabled due to Webpack 4 bug | |
// See https://github.com/webpack-contrib/npm-install-webpack-plugin/issues/122 | |
// new NpmInstallPlugin({ | |
// save: true // --save | |
// }), | |
] | |
}) | |
module.exports = new Promise((resolve, reject) => { | |
portfinder.basePort = process.env.PORT || config.dev.port | |
portfinder.getPort((err, port) => { | |
if (err) { | |
reject(err) | |
} else { | |
// publish the new Port, necessary for e2e tests | |
process.env.PORT = port | |
// add port to devServer config | |
devWebpackConfig.devServer.port = port | |
// Add FriendlyErrorsPlugin | |
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ | |
compilationSuccessInfo: { | |
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], | |
}, | |
onErrors: config.dev.notifyOnErrors | |
? utils.createNotifierCallback() | |
: undefined | |
})) | |
resolve(devWebpackConfig) | |
} | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
const path = require('path') | |
const utils = require('./utils') | |
const webpack = require('webpack') | |
const config = require('../config') | |
const merge = require('webpack-merge') | |
const baseWebpackConfig = require('./webpack.base.conf') | |
const CopyWebpackPlugin = require('copy-webpack-plugin') | |
const HtmlWebpackPlugin = require('html-webpack-plugin') | |
const ExtractTextPlugin = require('extract-text-webpack-plugin') | |
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') | |
const env = process.env.NODE_ENV === 'testing' | |
? require('../config/test.env') | |
: require('../config/prod.env') | |
const webpackConfig = merge(baseWebpackConfig, { | |
module: { | |
rules: utils.styleLoaders({ | |
sourceMap: config.build.productionSourceMap, | |
extract: true, | |
usePostCSS: true | |
}) | |
}, | |
devtool: config.build.productionSourceMap ? config.build.devtool : false, | |
output: { | |
path: config.build.assetsRoot, | |
filename: utils.assetsPath('js/[name].[chunkhash].js'), | |
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') | |
}, | |
mode: "production", | |
plugins: [ | |
// http://vuejs.github.io/vue-loader/en/workflow/production.html | |
// extract css into its own file | |
new ExtractTextPlugin({ | |
filename: utils.assetsPath('css/[name].[contenthash].css'), | |
// Setting the following option to `false` will not extract CSS from codesplit chunks. | |
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. | |
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, | |
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 | |
allChunks: true, | |
}), | |
// Compress extracted CSS. We are using this plugin so that possible | |
// duplicated CSS from different components can be deduped. | |
new OptimizeCSSPlugin({ | |
cssProcessorOptions: config.build.productionSourceMap | |
? { safe: true, map: { inline: false } } | |
: { safe: true } | |
}), | |
// generate dist index.html with correct asset hash for caching. | |
// you can customize output by editing /index.html | |
// see https://github.com/ampedandwired/html-webpack-plugin | |
new HtmlWebpackPlugin({ | |
filename: process.env.NODE_ENV === 'testing' | |
? 'index.html' | |
: config.build.index, | |
template: 'index.html', | |
inject: true, | |
minify: { | |
removeComments: true, | |
collapseWhitespace: true, | |
removeAttributeQuotes: true | |
// more options: | |
// https://github.com/kangax/html-minifier#options-quick-reference | |
}, | |
// necessary to consistently work with multiple chunks via CommonsChunkPlugin | |
chunksSortMode: 'dependency' | |
}), | |
// keep module.id stable when vendor modules does not change | |
new webpack.HashedModuleIdsPlugin(), | |
// split vendor js into its own file | |
new webpack.optimize.CommonsChunkPlugin({ | |
name: 'vendor', | |
minChunks (module) { | |
// any required modules inside node_modules are extracted to vendor | |
return ( | |
module.resource && | |
/\.js$/.test(module.resource) && | |
module.resource.indexOf( | |
path.join(__dirname, '../node_modules') | |
) === 0 | |
) | |
} | |
}), | |
// extract webpack runtime and module manifest to its own file in order to | |
// prevent vendor hash from being updated whenever app bundle is updated | |
new webpack.optimize.CommonsChunkPlugin({ | |
name: 'manifest', | |
minChunks: Infinity | |
}), | |
// This instance extracts shared chunks from code splitted chunks and bundles them | |
// in a separate chunk, similar to the vendor chunk | |
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk | |
new webpack.optimize.CommonsChunkPlugin({ | |
name: 'app', | |
async: 'vendor-async', | |
children: true, | |
minChunks: 3 | |
}), | |
// copy custom static assets | |
new CopyWebpackPlugin([ | |
{ | |
from: path.resolve(__dirname, '../static'), | |
to: config.build.assetsSubDirectory, | |
ignore: ['.*'] | |
} | |
]) | |
] | |
}) | |
if (config.build.productionGzip) { | |
const CompressionWebpackPlugin = require('compression-webpack-plugin') | |
webpackConfig.plugins.push( | |
new CompressionWebpackPlugin({ | |
asset: '[path].gz[query]', | |
algorithm: 'gzip', | |
test: new RegExp( | |
'\\.(' + | |
config.build.productionGzipExtensions.join('|') + | |
')$' | |
), | |
threshold: 10240, | |
minRatio: 0.8 | |
}) | |
) | |
} | |
if (config.build.bundleAnalyzerReport) { | |
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin | |
webpackConfig.plugins.push(new BundleAnalyzerPlugin()) | |
} | |
module.exports = webpackConfig |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment