webpack ​

// 支持在 webpack.config.js 手动修改
module.exports = {
	entry: './index.js',  
	//单入口，常用，一般适用于单页面应用
	entry: {
	    pageOne: './src/pageOne/index.js',
	    pageTwo: './src/pageTwo/index.js',
	    pageThree: './src/pageThree/index.js',
  	},  
  	//多个入口，SSR, 一般适用于多页面应用
}

// 支持在webpack.config.js 手动修改
// 需要引入path, 
// 配置output对象的path 和 filename 属性
const path = require('path');
module.exports = {
	output:{
		path: path.resolve(__dirname, 'dist'),  
		//当前路径下的dist
		filename: 'my-first-webpack.bundle.js'
		// 单入口：输出的文件名
		filename: '[name].js',
		// 多入口，使用[name]占位符，需保证每个文件有唯一的文件名。
	}
}

// 使用module.rules作为配置项, 配置loader
module.exports = {
	module:{
		// 规则数组
		rules: [
			// 每一个loader表示一个规则，都由test和use组成
			{
				test: /\.css$/,  //匹配.css结尾的
				use: 'css-loader'
			},
			{
				test: /\.ts$/,  //匹配.ts结尾的
				use: 'ts-loader'
			}
		]
	}
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 访问内置的插件
module.exports = {
	plugins: [
		new HtmlWebpackPlugin(),
		// HtmlWebpackPlugin 将生成一个 HTML 文件
		new webpack.ProgressPlugin(),
		// ProgressPlugin 用于自定义编译过程中的进度报告，
	]
}

module.exports = {
	mode: 'development'
}

// npm和nodejs只支持 const a = require('./a.js')
import { say } from './a.js'
// 而用webpack构建的话,支持ESM

export {
	say
}
// module.exports = {
// 	say
// }

const BundleAnalyzer = require('webpack-bundle-analyzer')
// webpack.config.js
module.exports = {
	plugins: [
		// 配置插件
		new BundleAnalyzer(), //使用默认配置

	]
}

// webpack.config.js
module.exports = {
	// 通过rules配置所有的loader
	rules: [
		{
			test: '/\.js$/',  
			loader: 'bable-loader?cacheDirectory', //在loader上，添加?cacheDirectory
			include:[resolve('src')]
		}
	]
}

// webpack.config.js
module.exports = {
	resolve:{
		extensions: ['.js','.vue','.json'],
		alias: {
			'@': resolve('src')
		}
	}
}

// 配置完如上, 即可以在项目中引入和配置
import tool from '@/utils/tool'
// 会从src开始查找，仅查找.js, .vue, .json后缀

const ClosurePlugin = require('closure-webpack-plugin')
// 例如指定生产模式
module.exports = {
	// mode: 'production',
	// 例如使用ClosurePlugin插件压缩
	optimization: {
		minimizer: [
			new ClosurePlugin()
			/* 默认等价于如下配置
			new ClosurePlugin({mode: 'STANDARD'}, {
		        // compiler flags here
		        //
		        // for debugging help, try these:
		        //
		        // formatting: 'PRETTY_PRINT'
		        // debug: true,
		        // renaming: false
		      })
			*/
		    ]
		]
	}
}

// webpack.cofig.js
module.exports = {
	devtool: 'inline-source-map',
	// 一般配合webpack-dev-server使用(见webpack官网)
	// 指定serve路径
	devServer: {
		static: './dist',
	}
}

/*
Uncaught ReferenceError: cosnole is not defined
   at HTMLButtonElement.printMe (print.js:2)
*/

module.exports = {
	devtool: 'none'
}

//vue.config.js
module.exports = {
	productionSourceMap: false,  //默认为true
	// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
// 使用默认的入口src/index.js
// 使用默认出口./dist
// 配置空loader,plugins,环境为默认不配置
module.exports = {
	module: {
		rules: [

		]
	},
	plugins: [
		new HtmlWebpackPlugin()
	],
}

import { say } from './a.js'
say()
console.log(123);

const say = function(){
	console.log('aaaaaaa')
}

export {
	say
}

// 多了1个dist文件夹, index.html和main.js
(()=>{"use strict";console.log("aaaaaaa"),console.log(123)})();