webpack入门介绍

Posted 2021-06-26 ZZZ --- jh

webpack介绍

---

webpack : 自动化构建工具(配置,构建,打包)

webpack是使用node.js实现的模块化代码打包器. 可以把需要的模块打包成一个或者多个包.

功能:

• 代码打包器;
• 可以打包所有的样式,图片,js,css预处理器;
• 友好的模块化支持;
• 处理js兼容问题;
• 性能优化;

---

安装

​ 先安装node.js,再安装webpack (包管理器: year / npm)

1. 安装之前要先npm init初始化. (npm init -y)

2. 再输入下面命令安装(注意: 不推荐全局安装)

   npm install -D webpack webpack-cli
   

   解释: webpack: webpack代码. 存放的指令调用的功能

   ​ webpack-cli: 提供webpack命令,工具, 存放的指令

3. 在package.json中的scripts里面写"start": “./node_modules/.bin/webpack”

4. 再创建src文件夹,里面创建index.js随便写点内容.

5. 再全局的文件夹下建一个index.htm引入index.js运行看浏览器出效果

6. 然后再npm start出现压缩文件夹dist下的main.js

7. 接着把index.html引入的路径改为./dist/main.js

---

使用

// 查看版本号
./node_modules/.bin/webpack -v

---

打包模块

入口文件:

​ 入口文件就是项目中加载的第一个文件,比如上面的main.js文件,其他文件都是通过import等方式引入的,webpack会从我们指定的入口文件开始分析所有需要依赖的文件,然后打包成一个完整的文件.

打包命令:

webpack ./js/index.js

​ 上面命令会使用webpack默认的一些配置对模块文件进行打包,并把打包后的文件输出到默认创建的./dist目录下,打包后的文件名称默认为main.js.

​ 模块文件打包后,就可以在不支持es6模块语法的浏览器环境下引入使用了.

​ 打包文件分析:

• 把分散的模块文件打包到一个文件中, 不需要外部引入了
• 内置了一个小型模块加载器(类似requireJS),实现了打包后的代码隔离与引用

---

打包配置

​ 创建一个webpack.config.js的配置文件来实现打包.

​ webpack 命令在运行时, 默认会读取运行命令所在的目录下的

​ webpack.config.js 文件 通常会在项目的根目录下运行命令和创建配置文件.

​ 也可以通过—config选项来指定配置文件路径:

webpack --config ./configs/my_webpack.config.js

​ 配置文件:

module.exports = {
    // 配置项
}

​ 选项目录如下:

/
-- /dist - 项目打包后存放目录
-- /node_modules - 第三方模块
-- /src
------ css/
------ images/
------ js/
------ index.js
-- webpack.config.js
-- package.json

---

打包:

1. ./node_modules/.bin/webpack 要打包文件的路径: 执行webpack命令来对当前项目进行打包

./node_modules/.bin/webpack

注意:在黑窗口里面,写./node_modules/.bin/webpack会报错./不是内部或者外部的指令,要写成反斜杠.\\node_modules\\.bin\\webpack

2. 也可以编辑package.json的scripts来简化输入

// package.json
{
	...,
	"scripts": {
    	"test": "echo \\"Error: no test specified\\" && exit 1",
    	"hello": "./node_modules/.bin/webpack ./src/a.js",
	}
}

​ 在终端输入npm run hello会打包出来dist文件

注意: scripts中使用test,start,restart,stop命名时,可以再调用时省略run,即直接npm start

---

核心配置

mode

配置打包出来的文件样式

模式: “production” | “development” | “none”

module.exports = {
    // production : 默认  压缩版
    // development : 未压缩
    // none : 空
    mode:'production',
}

---

entry(入口)

指定打包入口文件,有三种不同的形式: string | object | array

// 一对一: 一个入口,一个打包文件
module.exports = {
    entry:'./src/index.js'
}

// 多对一: 多个入口,一个打包文件
module.exports = {
    entry:[
        './src/index1.js',
        './src/index2.js',
    ]
}

// 多对多: 多个入口,多个打包文件
module.exports = {
    entry:{
        'index1' : './src/index1.js',
        'index2' : './src/index2.js',
    }
}

---

output(出口)

打包后的文件位置

const path = require("path")

module.exports = {
   	...,
    // 打包后的文件位置
    output: {
        // path路径 必须是绝对路径.
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        filename: "[name].js"
    }
}

• 可以指定一个固定的文件名称, 如果是多入口多出口(entry为对象), 则不能使用单文件出口, 需要使用下面的方式
• 通过webpack内置的变量占位符 :[name]

---

深入

在webpack中, 有一个特性: 模块不仅仅只是js文件,webpack可以把任意文件数据作为模块进行处理,包括非js文本 css 图片等等.

import txt from './a.txt';
console.log(txt);

但是,webpack默认情况下只能处理js模板, 如果需要处理其他类型的模板,则需要使用它提供的一些其他功能.

执行简要流程

• loaders：webpack 中核心的内容之一，非 js 类型的模块处理就靠它，不同类型的模块的解析就是依赖不同的 loader 来实现的
• plugins：webpack 中另外一个核心的内容，它主要是扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩.

---

注意:

1. 安装webpack之前先安装node.js;

2. 安装完node,要先npm init初始化再安装webpack;

3. 安装webpack时要注意是全局安装还是局部安装;

4. 查看版本号的指令后面要注意有 -v,如果只写前面的指令会报错;
   

5. 在黑窗口里面,写./node_modules/.bin/webpack会报错./不是内部或者外部的指令,要写成反斜杠.\\node_modules\\.bin\\webpack;

6. package.json的scripts来简化输入时使用test,start,restart,stop命名时,可以再调用时省略run,即直接npm start;

7. output中打包后的文件位置的path路径必须是绝对路径;

8. webpack默认情况下只能处理js模板;需要提供的其他功能来把任意文件数据作为模块进行处理

---

总结:

1. webpack 是 自动化构建工具,通俗理解就是代码打包器

2. 功能

   • 可以打包所有的样式,例如图片,js,等等
   • 友好的模块化支持
   • 处理js兼容问题
   • 性能优化

3. 安装指令

   npm install -D webpack webpack-cli

4. 查看版本号
   ./node_modules/.bin/webpack -v

5. 打包

   • ./node_modules/.bin/webpack 要打包文件的路径
   • package.json的scripts来简化输入,然后在终端npm输出打包
   • 打包完后会默认创建./dist目录,文件名默认main.js
   • 打包配置文件module.exports = { // 配置项 }

6. mode

   • 配置导报出来的文件样式

   • 模式: “production” | “development” | “none”

7. entry(入口)

   • 指定打包入口文件

   • 形式: string | object | array

   • 配置时有一对一,多对一,多对多

8. output(出口)

   打包后的文件位置