14、webpack的基本使用

Webpack官网：https://www.webpackjs.com/

1、webpack

• Webpack 就是一个前端资源加载/打包工具。
• 它的作用是将多种静态资源 js、css、less 转换打包成一个或多个 bundle，减少页面请求，优化性能。比如把多个JS打包成一个JS文件，把多个CSS文件打包到一个CSS文件，这样的话就不用一个个来导入。
• Webpack 有5个关键核心点：
• 1、entry：它是导入模块和库的入口起点
• 2、output：告诉 webpack 在哪里输出它所创建的 bundles
• 3、loader：处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）打包起来，比如说CSS和图片等，需要转换才能打包
• 4、plugins：用来处理各种各样的任务，比如自动生成html文件，清除dist目录的插件等等。
• 5、modle：打包模式，development是没有压缩的，production是压缩的

---

2、webpack的基本打包配置

• 1、初始化：yarn init -y

• 2、安装依赖包：yarn add webpack webpack-cli -D

• 3、到package.json文件中配置scripts：

  "scripts": {
    "build":"webpack --config webpack.config.js"
  }

• 4、配置webpack.config.js文件：

const path = require('path');
module.exports = {
	// 1、entry入口
	entry: './src/index.js',
	//   2、output出口
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	// 3、mode模式，development是没有压缩的，production是压缩的
	mode: 'development',
};

• 5、打包：yarm build

• 如果是vue打包的话，可以利用vue-cli脚手架自动生成webpack配置，然后npm run build打包即可

---

3、导入（require）多个js文件打包成一个bundle.js

// 导入case1
require('../public/js/case1.js')
// 导入jquery
const $ = require('jquery')
$(function () {
	$('#app li:nth-child(odd)').css('color', 'red')
	$('#app li:nth-child(even)').css('color', 'black')
});

---

4、自动生成html文件（html-webpack-plugin）

• 1、安装：yarn add html-webpack-plugin -D
• 2、引入自动生成html的插件：const HtmlWebpackPlugin = require('html-webpack-plugin');
• 3、配置：plugins: [new HtmlWebpackPlugin({template: './src/index.html'})]
• 作用：不需要手动引入bundle.js，插件帮你完成

---

5、加载css文件（css-loader）

• 1、安装loader转换器：yarn add style-loader css-loader -D
• 2、配置加载规则：

// 6、调用CSS文件，因为webpack只认识JSON和JS，所以需要配置loader
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					{ loader: 'style-loader' },
					{
						loader: 'css-loader',
						options: {
							modules: true
						}
					}
				]
			}
		]
	}

---

6、分离css文件（mini-css-extract-plugin）

• 1、安装：yarn add mini-css-extract-plugin -D
• 2、引入：const MiniCssExtractPlugin = require('mini-css-extract-plugin');
• 3、配置：loader: MiniCssExtractPlugin.loader
• 4、调用：new MiniCssExtractPlugin({ filename: 'css/index.css' })

---

7、加载less文件（less-loader）

• 1、安装：yarn add less less-loader -D
• 2、配置：

{
	test: /\.less$/,
	use: [
	{
		loader: MiniCssExtractPlugin.loader,
		options: { publicPath: '../' }
	}, 'css-loader', 'less-loader']
}

---

8、加载图片文件（url-loader）

• 1、安装：yarn add url-loader file-loader -D
• 2、配置：

 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }

9、清除dist目录的插件（clean-webpack-plugin）

• 1、安装：yarn add clean-webpack-plugin -D
• 2、导入：const { CleanWebpackPlugin } = require('clean-webpack-plugin');
• 3、调用：

 plugins: [
		// 自动生成html文件
		new HtmlWebpackPlugin({ template: './src/index.html' }),
		// 分离css文件
		new MiniCssExtractPlugin({ filename: 'css/index.css' }),
		// 清除dist文件
		new CleanWebpackPlugin()
	],