Webpack学习

一、Webpack 介绍

什么是 Webpack ？

Webpack是一个模块打包器(bundler)。在Webpack看来，前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理，它将根据模块的依赖关系进行静态分析，生成对应的模态资源。
​
Loader 的 理解

Webpack本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader进行转换/加载。

Loader本身也是运行在node.js环境中的JavaScript模块。它本身是一个函数，接受源文件作为参数，返回转化的结果。loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如json-loader。

配置文件：webpack.config.js：是一个node模块，返回一个json格式的配置信息对象

插件： 插件可以完成一些loader不能完成的功能
​
文档：Webpack 中文文档

二、Webpack 的使用

2.1 基本使用

① 初始化项目

新建空项目，创建package.json文件，局部安装webpack(可选，安装过node会自动全局安装webpack)

package.json文件内容：

{
    "name": "webpack_test",
    "version": "1.0.0"
}	

② 创建入口 entry.js

入口函数中整合所有的资源

③ 使用 Webpack 配置文件

创建webpack.config.js

const path = require('path'); //path内置的模块，用来设置路径。
module.exports = {
	entry: './src/js/entry.js',   // 入口文件
	output: {                     // 输出配置
	filename: 'bundle.js',      // 输出文件名
	path: path.resolve(__dirname, 'dist')   //输出文件路径配置
	}
};

在package.json文件中添加

"scripts": {
	  "build": "webpack"
}

④ 启动打包

启动命令：webpack

2.2 打包 css 和图片文件

① 安装样式的 loader

npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
注：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。		

② 在 webpack.config.js 中配置 loader

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

③ 入口函数 entry.js 中导入样式

import '../css/test.css'

④ 存在的问题

大图无法打包到entry.js文件中，会在资源目录下生成。index.html不在生成资源目录下时，页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到

解决办法：

1. 使用publicPath : 'dist/js/'，设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。这种方法会导致无法使用热部署
2. 将index.html放在dist/js/也可以解决

2.3 测试环境下自动编译打包

利用webpack开发服务器工具: webpack-dev-server

安装：npm install --save-dev webpack-dev-server

在webpack.config.js中配置：

devServer: {
	contentBase: 'dist/'
}

启动命令：webpack-dev-server​

2.4 使用 webpack 插件

① 常用的插件

1. 使用html-webpack-plugin根据模板html生成引入script的页面
2. 使用clean-webpack-plugin清除dist文件夹
3. 使用uglifyjs-webpack-plugin压缩打包的js文件

② 使用

npm install --save-dev html-webpack-plugin clean-webpack-plugin

③ webpack 配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清除之前打包的文件   

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

④ 启动

创建模板页面，使用webpack命令启动生成资源