webpack 从入门到放弃

Webpack 是一个前端的静态模块资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

常用命令

webpack -v 查看版本号
webpack ./js/main.js -o ./js/bundle.js 第一个路径为入口js的路径，第二个路径参数为生成文件的路径
​

使用配置文件之后，直接使用 webpack 命令，不需要参数也可以打包，配置文件的名字为“webpack.config.js”。
下面是一个完整配置的内容：

// 引用 Node.js 中的 path 模块，处理文件路径的小工具
const path = require("path");
// 1. 导出一个webpack具有特殊属性配置的对象
module.exports = {
	// 指定模式配置,取值： none（什么也没有）, development or production(默认的)，不写的话会出现黄色警告
	// 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的
	mode: 'none',
	// 入口
	entry: './src/main.js', // 入口模块文件路径
	// 出口是对象
	output: {
		// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D: \StudentProject\ WebStudy\ webpack - demo2
		path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
		filename: 'bundle.js' // 打包的结果文件名
	}
}

​

webpack 应该作为本地安装，并且只需要存在于开发环境中，所以需要安装到开发环境依赖：

npm init -y 初始化项目
npm install webpack@v4.35.2 -D 把webpack安装到项目的开发环境依赖
npm install webpack-cli@3.3.6 -D  V4+版本的webpack需要安装cli
​

然后在 package.json 中添加映射：

	"scripts": {
		"show": "webpack -v",
		"start": "node ./src/main.js",
		"build": "webpack"
	}
​

完整的 package.json 配置：

{
	"name": "webpack3",
	"version": "1.0.0",
	"description": "",
	"main": "webpack.config.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"show": "webpack -v",
		"start": "node ./src/main.js",
		"build": "webpack"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"devDependencies": {
		"webpack": "^4.35.2",
		"webpack-cli": "^3.3.6"
	}
}
​

查看 webpack 版本号：npm run show
运行 main.js 模块：npm run start，如果命令映射的别名是 start ，可省略 run 进行简写执行，即：npm start
打包构建：npm run build

打包完成后，在 html 中引入打包生成的 bundle.js 文件，浏览器就可以正常识别了。

webpack 除了用来打包 js，还可以用来打包其他资源文件，比如 css，图片。

• 打包 css 资源

  1. 安装打包相关的工具插件：npm install --save-dev style-loader css-loader，css-loader 是将 css 装载到 javascript，style-loader 是让 javascript 认识 css。
  2. 在 webpack.config.js 中新增以下配置：

  module: { // 模块
  	rules: [ // 规则
  		{
  			test: /\.css$/, // 正则表达式，匹配 .css 文件资源
  			use: [ // 使用的 Loader ,注意顺序不能错
  				'style-loader',
  				'css-loader'
  			]
  		}
  	]
  }
  ​

  整个 webpack.config.js 中的配置内容如下：

  // 引用 Node.js 中的 path 模块，处理文件路径的小工具
  const path = require("path");
  // 1. 导出一个webpack具有特殊属性配置的对象
  module.exports = {
  	// 指定模式配置,取值： none（什么也没有）, development or production(默认的)
  	// 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的
  	mode: 'none',
  	// 入口
  	entry: './src/main.js', // 入口模块文件路径
  	// 出口是对象
  	output: {
  		// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D: \StudentProject\ WebStudy\ webpack - demo2
  		path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
  		filename: 'bundle.js' // 打包的结果文件名
  	},
  
  	module: { // 模块
  		rules: [ // 规则
  			{
  				test: /\.css$/, // 正则表达式，匹配 .css 文件资源
  				use: [ // 使用的 Loader ,注意顺序不能错
  					'style-loader',
  					'css-loader'
  				]
  			}
  		]
  	}
  }
  
  ​

  3.在 src 目录下新建一个 style.css 文件，内容如下：

  body {
  	background: red
  }
  
  ​

  4.在 main.js 中引入 style.css 文件

  // 模块方式导入 css , 最终会打包成js，打包在 bundle.js 中
  import './css/style.css'
  ​

  5.打包编译

  npm run build
  ​

  最后打开 html 文件，就可以看见 css 已经生效了。

• 打包图片资源
  1.安装相关工具

  npm install --save-dev file-loader
  ​

  2.修改 webpack.config.js 文件配置，内容如下：

  // 引用 Node.js 中的 path 模块，处理文件路径的小工具
  const path = require("path");
  // 1. 导出一个webpack具有特殊属性配置的对象
  module.exports = {
  	// 指定模式配置,取值： none（什么也没有）, development or production(默认的)
  	// 如， production 模式打包后 bundle.js是压缩版本的， development则不是压缩的
  	mode: 'none',
  	// 入口
  	entry: './src/main.js', // 入口模块文件路径
  	// 出口是对象
  	output: {
  		// path 必须是一个绝对路径 , __dirname 是当前js的绝对路径：D: \StudentProject\ WebStudy\ webpack - demo2
  		path: path.join(__dirname, './dist/'), // 打包的结果文件存储目录
  		filename: 'bundle.js' // 打包的结果文件名
  	},
  
  	module: { // 模块
  		rules: [ // 规则
  			{
  				test: /\.css$/, // 正则表达式，匹配 .css 文件资源
  				use: [ // 使用的 Loader ,注意顺序不能错
  					'style-loader',
  					'css-loader'
  				]
  			},
  			{
  				test: /\.(png|svg|jpg|gif)$/,
  				use: [
  					'file-loader',
  				]
  			}
  		]
  	}
  }
  
  ​

  3.修改 style.css，内容如下：

  body {
  	background: red;
  	background-image: url(./1.jpg)
  }	
  ​

  4.打包编译

  npm run build
  ​

  5.如果直接访问根目录下的 index.html，那么图片资源路径就无法访问到。
  解决方案：就是把 index.html 放到 dist 目录中。
  但是 dist 是打包编译的结果，而非源码，所以把 index.html 放到 dist 就不合适。
  而且如果我们一旦把打包的结果文件名 bundle.js 改了之后，则 index.html 也要手动修改。
  综合以上遇到的问题，可以使用一个插件： html-webpack-plugin 来解决。

• 使用 HtmlWebpackPlugin 插件
  作用：解决文件路径问题
  将 index.html 打包到 bundle.js 所在目录中
  同时也会在 index.html 中自动的