webpack 基础学习 （一）

参考文献
	segmentfault - 基础配置（详细）+核心配置2
vue项目小实例	详细的基础实操

1.0、

2.0、

2.1、

2.2、

3、

const webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清理dist文件夹
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = function (env) {
	const
	isProd = env === 'production';
	let
	entry = buildEntries();

	return {
		mode: isProd ? "production" : "development",
		devtool:'eval-source-map',
		entry: entry,
		devServer:{
			host: 'localhost', //可选，ip
			port: 3000, //可选，端口
			contentBase:path.resolve(__dirname,'html'), //可选，基本目录结构
			compress: true, //可选，压缩
			 hot: true
		},
		
		optimization: {
			    splitChunks: {
			      cacheGroups: {
			        commons: {
			          name: 'commons',
			          chunks: 'initial',
			          minChunks: 2
			        }
			      }
			    }
		},
		
		output: {
			path: path.resolve(__dirname, 'dist'),
			publicPath: '/dist/',
			filename: isProd ? "[name].[chunkhash].js" : '[name].js',
		},

		module: {
			rules: [{
					test: /\.(html|png|gif|jpg|jpeg|eto|eot|ttf|svg|woff|woff2)(\?.*)?$/,
					exclude: /node_modules/,
					use: ['file-loader']
				}, {
					test: /\.css$/,
					exclude: /node_modules/,
					use: [
						// 'css-hot-loader', //支持热更新
						MiniCssExtractPlugin.loader,
						"css-loader", {
							loader: 'postcss-loader',
							"options": {
								plugins: [
									require("autoprefixer")
								]
							}
						}
					]
				}, {
					test: /\.scss$/,
					exclude: /node_modules/,
					use: [
						MiniCssExtractPlugin.loader,
						'css-loader',
						{
							loader: 'postcss-loader',
							"options": {
								plugins: [
									require("autoprefixer")
								]
							}
						},
						'sass-loader'
					]
				}, {
					test: /\.less$/,
					exclude: /node_modules/,
					use: [MiniCssExtractPlugin.loader, 'css-loader', {
						loader: 'postcss-loader',
						"options": {
							plugins: [
								require("autoprefixer")
							]
						}
					}, 'less-loader']
				}, {
					test: /\.(js|jsx)$/,
					exclude: /node_modules/,
					use: [{
							loader: 'babel-loader',
							options: {
								cacheDirectory: true,
								babelrc: false,
								"plugins": ["dynamic-import-webpack"]
								// 使用缓存
							}
						}
					]
				}
			]
		},
		resolve: {
			extensions: [".js", ".json", ".jsx", ".css", "less"],
		
			modules: [path.resolve(__dirname, 'commonjs'), path.resolve(__dirname, 'node_modules')]
		},

		plugins: [new CleanWebpackPlugin(['dist']),
		
		new webpack.HotModuleReplacementPlugin(),
			//全局配置
			new webpack.ProvidePlugin({ // 加载jq
				$: "jquery",
				jQuery: "jquery",
				"window.jQuery": "jquery"
			}), new webpack.NamedModulesPlugin(),
			//抽离样式
			new MiniCssExtractPlugin({
				filename: isProd ? "[name].[chunkhash].css" : "[name].css",
				chunkFilename:   isProd ? "[id].[chunkhash].css" : "[id].css",
			}),
			//压缩样式
			new OptimizeCssAssetsPlugin(),
			//自动补全样式
			new webpack.LoaderOptionsPlugin({
				test: /\.css$/,
				minimize: true,
				debug: false
			}),
			new ManifestPlugin({
				fileName: 'manifest.json',
				basePath: '/dist/'
			})
		],

		performance: isProd && {
			maxAssetSize: 100,
			maxEntrypointSize: 300,
			hints: 'warning'
		},

		stats: {
			colors: {
				green: '\u001b[32m'
			}
		}
	};
	function buildEntries() {
		// 用来构建entery
		const result = glob.sync("js/**/*.js");
		const config = {
			hash: true,
			inject: true
		}
		const entries = {};
		result.forEach(item => {
			const one = path.parse(item);
			const outputfile = one.name;
			console.log("编译文件:" + outputfile)
			entries[outputfile] = "./" + item;
		});
		
		return entries;

	}
}