webpack-是什么以及基本使用

Posted 火腿肠烧烤大赛冠军

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack-是什么以及基本使用相关的知识,希望对你有一定的参考价值。

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命令可以以命令行执行
在这里插入图片描述

以上是关于webpack-是什么以及基本使用的主要内容,如果未能解决你的问题,请参考以下文章

Webpack的基本使用

Webpack的基本使用

一webpack的基本使用

一webpack的基本使用

前端工程化之构建工具webpack 的基本使用

实例讲解webpack的基本使用第二篇