Question

我遇到了一个问题，当我检查我的chrome dev工具时，我的js文件声称它在第一行有一个语法错误，但浏览器上的所有内容似乎都正常运行。

enter image description here

我在webpack配置文件中配置错误了吗？

// webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { ProvidePlugin, DefinePlugin } = require('webpack');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const bootstrapEntryPoints = require('./webpack.bootstrap.config');

const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const bootstrapConfig = bootstrapEntryPoints.dev;
const production = process.env.NODE_ENV === 'production' ? true : false;
const cssRules = [
  { loader: 'css-loader', options: { minimize: production } }
];

console.log(path.resolve(__dirname, 'dist'));
module.exports = ({ coverage } = {}) => ({
	resolve: {
		extensions: [".js"],
		modules: [path.resolve(__dirname, 'src'), 'node_modules'],
	},
	entry: {
    	app: ['aurelia-bootstrapper'],
    	vendor: ['bluebird'],
    	bootstrap: [bootstrapConfig],
    	font_awesome: 'font-awesome/scss/font-awesome.scss'
  	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		// https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9
		publicPath: production ? 'http://test.webpack.dev.web/' : '/',
		filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
		sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
		chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
	},
	module: {
	   rules: [

			// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
			// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
			{
				test: /\.css$/i,
				//exclude: /node_modules/,
				issuer: [{ not: [{ test: /\.html$/i }] }],
				use: ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: cssRules
				})
			},
			{
				test: /\.css$/i,
				issuer: [{ test: /\.html$/i }],
				// CSS required in templates cannot be extracted safely
				// because Aurelia would try to require it again in runtime
				use: cssRules
			},
			{
            	test: /\.scss$/,
	            use: [
		            // creates style nodes from JS strings
		            { loader: "style-loader"}, 
		            { loader: "css-loader"}, // translates CSS into CommonJS
		            { loader: "sass-loader"} // compiles Sass to CSS
	            ]
        	},
			{ test: /\.html$/i, loader: 'html-loader'},
			{ test: /\.js$/i, loader: 'babel-loader' },
			// Use this for unit testing only
			// { test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
			//   options: coverage ? { sourceMap: 'inline', plugins: [ 'istanbul' ] } : {},
			// },
			{ test: /\.json$/i, loader: 'json-loader'},
			// // use Bluebird as the global Promise implementation:
			//{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise'},
			// // embed small images and fonts as Data Urls and larger ones as files:
			{ 
				test: /\.(png|gif|jpg|cur)$/i,
				loader: 'url-loader'
			},
			{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader'},
			{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader'},
			// load these fonts normally, as files:
			{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader'},
			//To resolve datatable jquery issues:
			//{ test: require.resolve("datatables.net"),  use: "imports-loader?this=>window" },
			//To resolve bootstrap to run properly
			//{ test:/bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/, use: 'imports-loader?jQuery=jquery' },
			// To resolve font-awesome
			// https://medium.com/@estherfalayi/setting-up-webpack-for-bootstrap-4-and-font-awesome-eb276e04aaeb
			{
				test: /font-awesome\.config\.js/,
				use: [
					{ loader: 'style-loader'},
					{ loader: 'font-awesome-loader'}
				]
			}
	   ]
	},
	plugins: [
		new ExtractTextPlugin({
			filename: production ? '[name].[chunkhash].bundle.css' : '[name].[hash].bundle.css',
			allChunks: true,
		}),
		new AureliaPlugin({}),
		new CleanWebpackPlugin(['dist']),
		// new ModuleDependenciesPlugin({
  //     		'aurelia-testing': [ './compile-spy', './view-spy' ],
  //   	}),
		new ProvidePlugin({
			'Promise': 'bluebird',
			$: "jquery",
			jQuery: "jquery",
			'window.jQuery': 'jquery',
			'window.$': 'jquery'
		}),
		new HtmlWebpackPlugin({
			// change
			template: 'index.ejs',
			inject: true,
			metadata: { title: ''},
			favicon: "favicon.ico"
		}),
		// new CopyWebpackPlugin([
  //     		{ from: './src/favicon.ico', to: '/favicon.ico/' }
  //   	])
	],
	// to resolve fs problem from numbro module
	// node: {
	// 	fs: "empty"
	// }
});


/*

NOTES

current version: 2.0.0-rc.4

We released aurelia-webpack-plugin@3.0.0-rc.1 which is compatible with (and requires) Webpack 4. The major version bump is to prevent an automatic upgrade from 2.0.0-rc.5, which you should continue to use if you're still on Webpack 3.


https://github.com/npm/npm/issues/16839

numbro: v2 is not using setLanguage instead of culture function

$ error with data tables usually means that script contains dtnet(window, $) <-- remove that bit of code and it will be fixed

Need to remove all dtnet function calls to jquery, webpack handles jquery

Set PLATFORM.moduleName function to routes and any config file that aurelia is trying to read


To migrate with webpack 4 : https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

Update all ai-dialog to ux-dialog (for newer aurelia-dialog support)


https://medium.com/webpack/webpack-bits-learn-and-debug-webpack-with-chrome-dev-tools-da1c5b19554
Another way to enhance monitoring of webpack code

remove pre attribute from .message

*/

// webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// https://webpack.js.org/guides/build-performance/
module.exports = merge(common({coverage:false}), {
	devServer: {
		port: 8555,
		contentBase: './dist',
		historyApiFallback: {
			index: '/',
			rewrites: [
				{ from: '/favicon.ico/', to: '[favicon.ico]' }
			]
		},
		stats: { colors: true },
		hot: true
	},
	// https://webpack.js.org/configuration/devtool/#devtool
	//devtool: 'cheap-module-eval-source-map', // Use for better speed development and hot reloads
	devtool: 'inline-source-map',   // Use if you want to see the original source on chrome dev tools
	plugins: [
		new webpack.DefinePlugin({
        	'process.env.NODE_ENV': JSON.stringify('dev')
    	}),
    	new webpack.HotModuleReplacementPlugin(),
    	// This will provide you with a heat map that shows what is taking up the most space for a given bundle
    	//new BundleAnalyzerPlugin(),
    	// placing here because karma breaks on commonsChunkPlugin with webpackjsonp not defined error
		// new webpack.optimize.CommonsChunkPlugin({ 
		// 	name: ['app', 'vendor', 'bootstrap', 'font_awesome'],
		// 	minChunks: 3
		// })
		// new webpack.optimize.CommonsChunkPlugin({
	 //        name: 'node-static',
	 //        minChunks(module, count) {
	 //            var context = module.context;
	 //            return context && context.indexOf('node_modules') >= 0;
	 //        },
  //   	})
	]
});

如果解决了，这将是调试时不会分散注意力的事情，谢谢。

Answer 1

从版本64.0.3282.186开始，这是一个chrome dev工具解析问题。

检查谷歌金丝雀，我不再看到这个问题了。这可以关闭，除非其他人遇到不同的问题。

Aurelia Webpack：当这不是错误时，源地图显示错误

1 个答案: