webpack的基础使用

不学习就代表退步
153 阅读6分钟

webpack基本介绍

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

Snipaste_2022-05-02_19-38-21.png 现代 javascript 应用程序的 静态模块打包器 (module bundler)

  • 静态: 文件资源
  • 模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

  • less/sass     -> css
  • ES6/7/8       -> ES5
  • html/css/js -> 压缩合并

准备

环境准备：它是基于nodejs，所以本机一定要先安装了node。

项目准备：webpack是用来对已有项目进行打包，所以一定是在某个项目下进行应用打包。

知识准备：模块化（es6, commonjs模块化均可）

任意新建一个空文件夹，取名为webpack-demo，进入到文件夹内部，用 npm init -y 命令来生成一个package.json

准备初始代码

创建三个文件index.html,index.js,tool.js，最后的项目结构是：

项目名
├── index.html
├── index.js
├── tool.js
└── package.json

html文件里面随便写点什么都可以,最好写个div,再引入index.js文件

tool.js内容

export const updateDom = (id, content) => {
    window.document.getElementById(id).innerHTML = content
}

index.js内容

import { updateDom } from "./tool.js"
updateDom ('app','index.html')

现在就是index.js引入tool/js文件内容,index.html再引入index.js文件.但是无法在浏览器中运行,,所以现在就要开始安装使用webpack包

安装webpack

webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本，所以不推荐大家去全局安装。特别是打开一个老项目时，一定要注意一下它的webpack的版本号。

前端很多悲惨故事，都是是从版本不一致开始的。

采用局部安装的方式来安装它，注意，它只是一个开发依赖，并不是生产依赖，所以在命令行中加上-D。

安装

npm i webpack webpack-cli -D

下面来通过命令行工具来检查是否安装成功

npx webpack -v

注意：

  • 由于webpack并不是全局安装的，所以并不能直接使用webpack -v来做检验。
  • npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里，我们通过它来调用项目安装的模块，它在运行时会在node_modules/.bin中去检查命令是否存在。

使用

npx webpack ./index.js

如果没有遇到错误,说明打包操作已经成功：index.js和tool.js已经合成了一个main.js文件了。

Snipaste_2022-05-02_20-02-27.png

你会发现多了一个dist文件夹,main.js就在里面

Snipaste_2022-05-02_20-02-27.png

把这个文件引入index.html文件,把html文件里引入的index.js文件的代码注释掉或者删除掉也行, 运行html文件会发现js文件里写的样式成功引入html文件.main里的代码乱七八糟的不影响

Snipaste_2022-05-02_20-07-08.png

小结

    • 1为啥要用webpack

    • 有效处理模块化。默认情况下，浏览器并不支持模块化，而我们的前端项目又使用了模块化，有了webpack之后，就可以突破这个限制了。

    • webpack可以把多个相互引用的.js文件打包成一个文件，且文件有加密，压缩的效果，上线更安全。

    • 2这个过程中nodejs起了什么作用

    • 它是webpack的运行基础，没有了nodejs环境，就无法做类似于文件读写的操作了。

    • 最终生成的main.js并不是在nodejs环境中运行的，整个的项目效果还是在浏览器中运行的。

了解webpack的配置文件

Snipaste_2022-05-02_20-14-37.png

创建并使用默认配置文件

在项目根目录下创建一个名为webpack.config.js。其内容如下：

module.exports = {
  mode: 'development', // 打包方式
}

这个文件的意义是导出一个配置项：用来对webpack的打包行为做设置。在操作层面，就是学习如何去使用这个文件。

然后，再次运行打包命令，查看产生的main.js文件的内容，对比与之间的变化。

设置入口和出口

入口文件： 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块，这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。

出口文件：指定了最后打包之后的文件，重点是这个文件的具体位置。

在webpack中，默认的入口和出口分别是：

  • 默认入口是：./src/index.js
  • 默认出口是：./dist/main.js。

也就是说，如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下。

修改目录结构

项目名
├── index.html
├── src
│   ├── index.js
│   └── tool.js
└── package.json

省略入口文件，直接打包： npx webpack 由于在src目录已经存在index.js,所以会正常运行

根据需求修改目录

需求：如果在实际开发中，希望：

  • 这个入口文件不是index.js，而是main.js
  • 整体js文件不是放在src目录下，而是src/js下。

调整目录结构

项目名
├── index.html
├── src
│   └── js
│       ├── main.js
│       └── tool.js
├── webpack.config.js  # webpack的配置文件
└── package.json

(2) 然后，修改配置项

  1. 修改src/index.js的名字为src/js/main.js
  2. 在webpack.config.js的配置项中添加 entry项
module.exports = {
  mode: 'development', // 打包方式
  entry:'./src/js/main.js' // 入口文件
}

人口文件修改完成,再次打包测试 npx webpack

指定出口文件

在webpack.config.js中设置output项。

目标： 把出口文件设置为在build目录下的bundle.js

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    mode: "development",
    entry: './src/js/main.js', // 入口文件
    output: {
        "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
        "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    }
}

说明：

  • output中的filename用来指定打包后的文件名字。
  • output中的path用来指定打包后的路径。注意：它必须是绝对路径。所以，这里引用path模块中的join和__dirname来生成绝对路径。
  • 如果path中的路径不存在，它会自动创建。

webpack.config.js中的mode项用来设置打包的方式，如果不设置，会默认为production。

webpack给mode 提供了两个模式:

●  development :开发模式(代码不会压缩 混淆)
●  production:生产模式（压缩，混淆，加密....... 不可读）

在打包时指定配置文件

有不一样的需求的时候可以自己再配置一个文件

在项目根目录下创建webpack.build.js，内容如下：

module.exports = {
  output:{
    filename:'boundle.js'
  }
}

下面，希望使用这个配置文件中的设置来打包。

它的格式是：

npx webpack --config webpack的配置文件

运行命令：

npx webpack --config webpack.build.js

简化打包命令

背景

当涉及多个打包配置要指定时，打包命令比比较复杂，难以记忆。

定制script

可以在package.json中添加script命令来快速启动webpack，格式如下：

"scripts": {
"自定义命令名": "要具体执行的代码",
}

示例

"scripts": {
  "build": "webpack --config webpack.build.js",
  "test": "echo "Error: no test specified" && exit 1"
}

运行 npm run build

正常跑起来就ok拉

ceeb653ely8gu3sv5gzxej20rs0rstay.jpg

avatar
文章
阅读
粉丝