webpack基础学习

一、Webpack的五个核心概念

entry(入口)

**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

插件(plugins)

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

模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

• 1.运行指令
• 开发环境: webpack ./src/index.js -o ./build/built.js --mode=development
• webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js
• 生产环境: webpack ./src/index.js -o ./build/built.js --mode=production
• 2.结论
• 1.webpack能处理js/json资源,不能处理css/img等其他资源
• 2.生成环境和开发环境将ES6模块编译成浏览器能识别的模块化
• 3.生产环境比开发环境多一个压缩js代码

打包样式资源

主要配置是moudle中的rules，
注意，如果安装css-loader,style-loader报错，一般降低版本即可，
npm i style-loader@1 css-loader@3 less@3 less-loader@5 -D

webpack.js

/*
* webpack配置文件
*/

// rescolve用来拼接绝对路径的方法
const {resolve} = require('path');

module.exports = {
	// webpack配置
	// 入口文件
	entry:'./src/index.js',

	// 输出
	output:{
		// 输出文件名
		filename:'built.js',
		// __dirname nodejs变量,代表当前文件的目录绝对路径
		path:resolve(__dirname,'build')
	},

	// loader
	module:{
		rules:[
			// 详细loader配置
			// 不同文件必须配置不同loader处理
			{
				//配置哪些文件
				test:/\.css$/,
				// 使用哪些loader
				use:[
					// use数组中顺序,从最后到第一个
					// 创建style标签,js中的样式资源插入进行,添加到head生效
					'style-loader',
					// 将CSS文件变成commonjs模块加载到js中,内容是字符串
					'css-loader'
				]
			},
			{
			 	test:/\.less$/,
				use:[
					'style-loader',
					'css-loader',
					// less-loader和less
					'less-loader'
				]
			}
		]
	},

	plugins:[],

	mode:'development',

}

打包html资源

plugin使用
npm i html-webpack-plugin@3 -D

/*
* webpack配置文件
* plugins: 1. 下载 2.引入 3.使用
*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry:'./src/index.js',

	output:{
		filename:'built.js',
		path:resolve(__dirname,'build')
	},

	module:{
		rules:[
			{
				test:/\.css$/,
				use:[
					'style-loader',
					'css-loader'
				]
			},
			{
			 	test:/\.less$/,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			}
		]
	},

	plugins:[
		// 默认创建一个空的html,自动引入打包输出的资源
		// 需求:需要有结构的HTML文件
		new HtmlWebpackPlugin({
			// 复制 index.html文件,并自动引入
			template: './src/index.html'
		})
	],

	mode:'development',

}

打包图片资源

下载url-loader,file-loader
npm install url-loader file-loader
npm install html-loader@0 -D
问题：html中引入的需要其他loader，此时需要关闭url-loader里的es6模块，用Common.js

/*
* webpack配置文件
* plugins: 1. 下载 2.引入 3.使用
*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: './src/index.js',

	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build')
	},

	module: {
		rules: [
			{
				test: /\.less$/,
				use: ['style-loader', 'css-loader', 'less-loader']
			},
			{
				//处理图片资源
				test: /\.(jpg|png|gif)$/,
				// 下载url-loader,file-loader
				loader: 'url-loader',
				options: {
					// 图片大小小于8kb,就会被base64处理
					// 优点:减少请求数量,减轻服务器压力
					// 缺点:图片体积更大
					limit: 8 * 1024,
					// 问题:url-loader默认es6解析,html-loader默认是common.js
					// 解析会出现问题:[object Module]
					// 解决:关闭url-loader的es6模块化
					esModule:false
				}
			},
			{
				test:/\.html$/,
				// 处理html文件的Img图片(负责引入img)
				loader:'html-loader'
			}
		]
	},

	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	],

	mode: 'development',

}

其他资源

/*
* webpack配置文件
* plugins: 1. 下载 2.引入 3.使用
*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: './src/index.js',

	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build')
	},

	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				exclude:/\.(css|js|html)$/,
				loader:'file-loader'
			}
		]
	},

	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	],

	mode: 'development',

}

开发环境配置

/*
* 开发环境配置
*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'built.js',
		path: resolve(__dirname, 'build')
	},

	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test:/\.less$/,
				use:[
					'style-loader',
					'css-loader',
					// less-loader和less
					'less-loader'
				]
			},
			{
				// 其他资源
				exclude:/\.(css|js|html)$/,
				loader:'file-loader',
				options: {
					outputPath:'asset'
				}
			},
			{
				// 处理图片资源
				test:/\.(jpg|png|gif)$/,
				loader: 'url-loader',
				options:{
					limit:8*1024,
					name:'[hash:10].[ext]',
					esMoudule:false
				}
			},
			{
				//html中的img资源
				test:/\.html$/,
				loader: 'html-loader'
			}
		]
	},

	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html'
		})
	],

	mode: 'development',

	// 开发服务器devServer: 用来自动化
	// 特点只会在内存中编译打包,不会有任何输出
	// 启动devServer指令为:npx webpack-dev-server
	devServer:{
		contentBase:resolve(__dirname,'build'),
		// 启动gzip压缩
		compress:true,
		//端口号
		port:3000,
		// 自动打开浏览器
		open:true
	}
}

生产环境

提取css成单独文件