我有一个有效的webpack.config.js
我经常用于开发,其中包含以下内容:
var path = require('path')
const merge = require('webpack-merge');
const NpmInstallPlugin = require('npm-install-webpack2-plugin');
var webpack = require('webpack')
var ManifestPlugin = require('webpack-manifest-plugin')
var InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')
const proxyTarget = 'http://localhost:2246/'
const visitPort = '8056'
const isMinimize =false
const outputFolderName = ''
const TARGET = process.env.npm_lifecycle_event;
isDebug = process.env.NODE_ENV === 'production' ?
true :
false;
const common = {
entry: './src/app.js',
devServer: {
hot: true,
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
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'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(woff|woff2|ttf|eot)(\?\S*)?$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve : {
alias: {
'vue$': 'vue/dist/vue'
}
}
}
if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
} else {
module.exports.devtool = '#source-map'
}
if(TARGET === 'build') {
module.exports = merge(common,
{
devtool: 'source-map',
});
}
if(TARGET === "dev-server") {
module.exports = merge(common, {
devtool: 'cheap-module-eval-source-map',
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
stats: true,
noInfo: true,
quiet: true,
stats: 'errors-only',
// host: process.env.HOST,
port: 3001
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true // --save
})
]
});
}
以下npm run
命令位于package.json
,所有命令都成功运行
"scripts": {
"dev-server": "cross-env NODE_ENV=development webpack-dev-server",
"dev": "cross-env NODE_ENV=development electron ./",
"build": "cross-env NODE_ENV=production webpack --progress --profile --colors",
"start": "cross-env NODE_ENV=production electron ./",
"package": "npm run build; npm run package-osx;
}
我正在尝试使用webpack-bundle-size-analyzer来检查捆绑的软件包。以下命令
$ webpack --json | webpack-bundle-size-analyzer
产生了此错误
/usr/local/lib/node_modules/webpack/bin/convert-argv.js:507
throw new Error("'output.filename' is required, either in config file or as --output-filename");
^
Error: 'output.filename' is required, either in config file or as --output-filename
at processOptions (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:507:11)
at processConfiguredOptions (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:150:4)
at module.exports (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:112:10)
at yargs.parse (/usr/local/lib/node_modules/webpack/bin/webpack.js:171:41)
at Object.Yargs.self.parse (/usr/local/lib/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
at Object.<anonymous> (/usr/local/lib/node_modules/webpack/bin/webpack.js:152:7)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Function.Module.runMain (module.js:609:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:598:3
Error: The input is not valid JSON.
Check that:
- You passed the '--json' argument to 'webpack'
- There is no extra non-JSON content in the output, such as log messages.
The parsing error was:
SyntaxError: Unexpected end of JSON input
webpack:3.6.0
webpack-bundle-size-analyzer:2.7.0
webpack.config.js
文件
webpack.config.js
文件中没有拼写错误我只需要从webpack输出一个简单的JSON来提供给webpack-bundle-size-analyzer