J-DuYa / webpack-space

webpack学习 赶紧学呀*年!!!!!

学习webpack

1. 安装webpack

npm install webpack webpack-cli -D

2. webpack可以0配置运行

3. 手动配置webpack

// 遵守commonJs
module.exports = {
	// 指定生产和开发 production development
	mode: "development",
	devServer: { // 开发环境配置
		port: 3000, //端口号
		progress: true, // 进度条
		contentBase: "./build", // ？
		compress: true // 对所有服务启动gzip压缩
	},
	// 入口
	entry: "./src/main.js",
	output: { // 出口
		filename: "bundle.js",
		path: path.resolve(__dirname, "build")
	},
	plugins: [ // 插件数组
		new HtmlWebpackPlugin({
			template: "项目index.html路径",
			filename: "index.html", // 打包后的index页面
			hash: true, // 打包后的index页面引入的bundle【hashCode】.js
			minify: {
				// 去掉双引号
				removeAttributeQuotes: true,
				// 折叠index
				collapseWhitespace: true
			}
		})
	]
};

4. 处理css模块

// webpack.config.js
// 模块内配置css解析
module: {
	rules: [
		{
			test: /\.css$/,
			use: [
				{
					loader: MiniCssExtractPlugin.loader
				},
				"css-loader"
			]
		},
		{ // 解析less-loader
			test: /\.less$/,
			use: [
				{
					loader: MiniCssExtractPlugin.loader
				},
				"css-loader",
				"less-loader"
			]
		}
	]
}

// 需要的插件 mini-css-extract-plugin 压缩css

autoprefixer postcss-loader(需要单独配置一个postcss.config.js) optimize-css-assets-webpack-plugin

babel-loader babel-core @babel/core @babel/preset-env

@babel/plugin-proposal-class-properties

module: {
	rules: [
		{
			test: /\.js$/,
			use: {
				loader: "babel-loader",
				options: {
					presets: [
						"@babel/preset-env"
					],
					plugins: [
						"@babel/plugin-proposal-class-properties"
					]
				}
			}
		}
	]
}	

@babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/runtime 使用-S 生产环境使用 @babel/polyfill

file-loader url-loader

{
	test: /\.(png|jpg|gif)/,
	use: {
		loader: "url-loader",
		options: {
			limit: 1,
			outpath: "images/"
		}
	}
}

// 配置
devtool 
1) "source-map" // 增加映射单独文件
2) "eval-source-map" // 不会产生单独的文件 但是可以显示行和列
两者的区别：不会产生列 但是是一个单独的映射文件
3) "cleap-module-source-map" 产生后可以保留起来
4) "cleap-module-eval-source-map" 不会产生文件 集成在打包后的文件中，不会产生列

clean-webpack-plugin // 清除某一个文件夹 重新生成新的 copy-webpack-plugin // 拷贝文件 banner-plugin (webpack内部插件) // 版权声明

warning: uglifyjs-webpack-plugin这个好像没起作用 fuck the idea!

postcss.config.js

module.exports = {
	plugins: [ require("autoprefixer") ]
}

5 学习webpack内部机制

学习webpack的原理机制，让生活变得更加有趣

// 同步 方法 tap(注册) call(监听) SyncHook SyncBailHook SyncWaterfallHook SyncLoopHook

// 异步 分为两种: 串行 并行。 注册方法 tapAsync(cb) tapPromise 监听方法 callAsync promise （异步并发） AsyncParallelHook AsyncParallelBailHook (异步熔断)

（异步串行） AsyncSeriesHook AsyncSeriesBailHook AsyncSeriesWaterfallHook