Webpack-打包项目

1、完整的webpack.config.js配置

/*
	首先创建webpack.config.js文件,然后执行下面步骤:
	0.若未全局安装webpack,则先执行cnpm install webpack webpack-cli -g,安装过则跳过此步骤
	1.npm init -y
	2.在创建的package.json的scripts中加入如下代码:
		"dev": "webpack --watch",
		"serve": "webpack-dev-server --open --inline --progress --config webpack.config.js"
	3.npm i style-loader --save-dev
	4.npm i css-loader --save-dev
	5.npm i mini-css-extract-plugin --save-dev
	6.npm i html-webpack-plugin --save-dev
	7.npm i file-loader --save-dev
	8.npm i clean-webpack-plugin --save-dev
	9.npm i webpack-dev-server --save-dev
	10.npm link webpack --save-dev 或者 cnpm i webpack webpack-cli --save-dev
	11.npm run dev
*/
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清理dist的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
	entry: __dirname + "/src/index.js", //项目入口
	output: {
		path: __dirname + "/dist", //出口文件夹
		filename: "index.js" //出口文件名
	},
	mode: 'development', //以什么模式打包 'development'和'production'
	module: { //加载器loader
		rules: [
			//1.以<style>标签的形式引入在html 页内,'style-loader'
			// {test: /\.css$/,use: ['style-loader', 'css-loader']},
			//2.以<link>标签href 属性的形式实现外联引入,需要在plugins中配置HtmlWebpackPlugin
			{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader']},
			//3.图片资源 输出挂载到HTML模板
			{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
		]	
	},
	plugins: [
		new HtmlWebpackPlugin({ //输出配置插件
			template: './src/index.html',
			hash: true, //为所有包含的脚本和CSS文件附加唯一的编译哈希，这对缓存清除很有用
			filename: 'index.html', //打包后生成的文件名  放在output.path里面
			template: './src/index.html', //来自哪里 模板文件
			inject: 'body', //引入js的位置:引入js的位置:  'head'-头部引入 'body'/true--</body>之前引入 false不引入
			minify: { //压缩项配置
				removeComments: true, //是否清除HTML注释  
				collapseWhitespace: true, //是否压缩HTML  
				removeScriptTypeAttributes: true, //是否删除<script>的type="text/javascript"  
				removeStyleLinkTypeAttributes: true, //是否删除<style>和<link>的type="text/css"  
				minifyJS: true, //是否压缩页内JS  
				minifyCSS: true //是否压缩页内CSS  
			}
		}), //打包的时候 挂载资源到指定模板的配置插件
        //以<link>形式时打包的输出路径,它会把src/index.js中导入的两个css文件都挂载到dist/css文件的17869e.css中
		new MiniCssExtractPlugin({filename: './css/[hash:6].css'}), 
		new CleanWebpackPlugin(), //用来清理每次重新打包的时候的dist文件夹中多余的东西
		new webpack.HotModuleReplacementPlugin() //热更新服务
	],
	devServer: { //热更新
		contentBase: './dist', //相当于帮我们搭建了一个服务器 这个代表静态托管的目录
		host: 'localhost',
		compress: true,
		// inline: true,
		port: 8080,
		open: true,
		hot: true
	},
}

2、Webpack项目配置文件解析

（1）入口（entry）

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

module.exports = {
	entry: __dirname + "/src/index.js",
}

（2）输出（output）

output属性告诉 webpack在哪里输出path它所创建的bundles，以及如何命名filename这些文件，默认值为"./dist"。

module.exports = {
	entry: __dirname + "/src/index.js", //项目入口
	output: {
		path: __dirname + "/dist", //出口文件夹
		filename: "index.js" //出口文件名
	}
}

补充：多入口、多出口配置：

// 多入口、多出口配置
module.exports = {
	//多入口配置
	entry: {	//项目入口
		test1:__dirname + "/src/index.js",
		test2:__dirname + "/src/bar.js",
	},
	//多出口配置
	output: {
		path: __dirname + "/mydist", //出口文件夹
        /* 多入口对应的多出口 出口文件名字:[name]是一种关键字代表入口文件的名字,
        多入口文件名字没有写就默认为main  [hash:6]代表生成哈希值,6代表保留6位 */
		filename: "[name].[hash].js" ,
	},
	mode: 'development' //以什么模式打包 'development'和'production'
}

（3）加载器(loader)

loader让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

module.exports = {
	entry: __dirname + "/src/index.js", //项目入口
	output: {
		path: __dirname + "/dist", //出口文件夹
		filename: "index.js" //出口文件名
	},
	mode: "development", //以什么模式打包 'development'和'production'
	module:{	//加载器loader
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']}
		]
	}
}

（4）插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。 

const HtmlWebpackPlugin = require('html-webpack-plugin');				
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
	entry: __dirname + "/src/index.js", //项目入口
	output: {
		path: __dirname + "/dist", //出口文件夹
		filename: "index.js" //出口文件名
	},
	mode: "development", //以什么模式打包 'development'和'production'
	module:{	//加载器loader
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']}
		]
	},
	plugins:[
		new HtmlWebpackPlugin({template: './src/index.html'})//打包的时候 挂载资源到指定模板的配置插件
	]
}

3、webpack 与gulp 工具的区别

• webpack偏向于模块化开发的思想，gulp偏向于面向过程开发模式
• webpack适用于大型复杂的前端站点构建，gulp 轻量级

4、webpack里loader与plugin的不同

• loader负责文件格式转换
• plugin负责对转换后的文件进行修饰