webpack-是什么以及基本使用

Posted 2021-08-04 火腿肠烧烤大赛冠军

webpack-模块打包工具

老方法逐次引入文件出现的问题

1. 页面加载变慢
   本身可能加载一个js文件现在需要加载很多
2. 不知道每一个文件之间的关系
3. 代码不容易维护
   引入顺序等问题 查错困难

解决方式

在单一index.js中引入这些文件 运用import语法

引发问题

import为ESmodule语法，无法被浏览器识别

解决方式

利用webpack对代码进行翻译，进而
ps：webpack只认识部分引入规范所以不能定义为翻译器，被定义为bundler（模块打包工具）

模块的概念

支持的模块

这也就是为什么安装sass时候也要安装一个sass-loader的原因

各种模块API语法

webpack官方文档-模块API语法

应用新版本得node.js以及webpack可以提高webpack打包速度

webpack的安装

1. 尽量不要全局安装，避免同一电脑使用不同webpack版本

webpack配置

配置路径更改方式：（默认会有打包配置如果创建不写内容可能会报错）

配置语法：
webpack.config.js

const path = require('path');

module.exports = {
	//默认模式（默认为production会压缩 dev不会）
	mode: 'development',
	entry: {
		//在这里配置打包的路径(入口文件名字默认为main)
		main: './src/index.js'
	},
	module: {
		rules: [{
			test: /\\.jpg$/,
			use: {
				loader: 'file-loader'
			} 
		}]
	},
	output: {
		//输出文件名称
		filename: 'bundle.js',
		//输出路径__dirname代表当前路径(默认为dist目录)
		path: path.resolve(__dirname, 'dist')
	}
}

package.json

{
  "name": "lesson",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    //在这里可以配置npm-script语法来自定义执行命令(默认执行当前包作用域)
    //之后就可以执行 npm run bundle
    "bundle": "webpack" 
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "file-loader": "^2.0.0",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "webpack": "^4.25.1"
  }
}

执行webpack的三种方式

webpack-cli：使得webpack命令可以以命令行执行