知人のWebPACKのconfigureソースマップと時計の使用状況

• ソースマップ

JSを解析する過程で、そのソースマッピングコンテンツは、低レベルの解析文法に進めることが必要になることがあり、ここでは、configureラベルコンテンツに必要があります。

1搭載信頼

npm install @babel/core @babel/preset-env babel-loader  webpack-dev-server -D

2、コンテンツindex.jsを追加

console.log('home')

/* es6语法,es6->es5会变成构造函数 */
class Log {
	constructor() {
		console.log('error')
	}
}
let log = new Log();

 

3、追加バベルの設定

...
    module:{
		rules:[
			{
				test: /\.js$/,
				use:{
					loader:'babel-loader',
					options:{
						presets:['@babel/preset-env']
					}
				}
			}
		]
	},
...

3は、configure package.json

...    
    "scripts": {
		"build": "webpack --config webpack.config.js",
		"dev": "webpack-dev-server",
		"test": "echo \"Error: no test specified\" && exit 1"
	},
...

4、サービスを開始

npm run dev

1.  通常のコンソール出力 
2. ただ、bundle.jsへ]をクリックし、エラーを追加：2包装の結果であり、誤り見つけることができない（マッピングファイルの所望の効果を、クリックされたときに、エラー源は、コンテンツパッケージ化された参照ではなく） 
3. ソースマッピングdevtoolを追加

   // 1) 源码映射 会单独生成一个sourcemap 文件 出错了 会标识 当前报错的列和行
   	devtool:'source-map', // 添加映射文件 可以帮我们调试源代码

    

   

4. 概要

   entry: __dirname + "/src/index.js",
   	// 1) 源码映射 source-map:会单独生成一个sourcemap 文件 出错了 会标识 当前报错的列和行,特点:大而全
   	// 2) 源码映射 evl-source-map:不会单独生成一个单独文件 出错了 会标识 当前报错的列和行,特点:放到打包后的文件中如bundle.js
   	// 3) 源码映射 cheap-module-source-map:不会生成列,但是是一个单独文件 特点:产生后你可以保留起来用作调试
   	// 4) 源码映射 cheap-module-eval-source-map:不会产生文件,但是集成在打包后的文件中,不会产生列 特点:产生后你可以保留起来用作调试
   	devtool:'cheap-module-eval-source-map', // 添加映射文件 可以帮我们调试源代码

5. コード

   链接：https://pan.baidu.com/s/1vIG2VFg3q10Wmeygz381vg 
   提取码：vrk6 
   复制这段内容后打开百度网盘手机App，操作更方便哦

    

---

• ウォッチリアルタイムパッケージ

WebPACKの我々は、彼らが通過しているときに起動するたびたくないNPM実行ビルドが一度再パッケージ化が、WebPACKの-devのサーバー機能は、直ちに実体をファイルを見ることができない、我々は、コードがそれを達成するためにどのように、完全な実体ファイルを見ることができます変更したいですか？

• 設定し、時計

現在のコードの変更を監視、リアルタイムのパッケージ上のコードの変更、などindex.jsはその後、NPMの実行ビルドを実行する最初のconsole.lo（「XX」）が、オープンウォッチがtrueの場合項目は、非活性状態に梱包され、この時、我々は変更する場合index.jsコンテンツはconsole.log（「XX」）を、ブラウザインタフェースを更新すると、エラーが表示されなくなります。

• 時計のパラメータ

watchOptions: { // 监控的选项
		poll: 1000, // 多少秒监控一次
		aggregateTimeout: 500, // 防抖 (一直输入代码,如500ms内,一直输入的情况下,只打包一次)
		ignored: /node_module/, // 有一个文件夹可以不监控
	},