Webpack静态模块打包工具(介绍及简单打包)

最新推荐文章于 2023-11-05 20:25:46 发布

lvshun_19991027

最新推荐文章于 2023-11-05 20:25:46 发布

阅读量305

点赞数

分类专栏： webpack 文章标签： js webpack

本文链接：https://blog.csdn.net/qq_43799743/article/details/111207970

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack中文文档：https://www.webpackjs.com/

1.概念

从本质上讲，webpack是一个现代的Javascript应用的静态打包工具，我们从两点来解释：模块和打包。

前端模块化：

开发时使用模块化开发（前端模块化方案：AMD、CMD、CommonJS、ES6）打包以后的代码是没有模块化代码的。比如开发时使用CommonJS开发，打包以后是没有CommonJS代码的。

在ES6之前，我们要想进行模块化开发，就必须要借助其他的工具完成，并且在通过模块化开发完成项目后，还需要处理模块之间的各种依赖，并将其打包。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是js文件，我们的CSS、图片、JSON文件等等在webpack中都可以被当作模块来使用。

打包：

理解了webpack可以帮助我们进行模块化，并且处理了模块之间复杂的关系后，打包就很好理解了。就是将webpack中的各种资源进行打包合并成一个或多个包。并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转换成css、ES6转换成ES5、Typescript转换成js等。

和grunt/gulp对比

grunt/gulp的核心是Task

我们可以配置一系列的task，并定义task要处理的事务（如ES6、ts转化，压缩图片，scss转css），之后让grunt/gulp 来以此执行这些task，而让整个流程自动化。所以grunt/gulp也被称为前端自动化任务管理工具。

grunt/gulp和webpack的不同点

grunt/gulp 更加强调的是前端流程的自动化，模块化不是他的核心。

webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能是他附带的功能。

2.webpack的安装

webpack必须依赖于Node环境。首先需要安装node。node环境为了可以正常执行很多代码，必须其中包含各种依赖的包。

npm工具为了管理这些包而存在的。（node packages managen）

webpack的安装首先需要安装Node.js，Node.js自带了软件包管理工具npm

查看自己的node版本：

node -v

当前文件目录下输入

npm init

来到这里

先起个名字，这里我们默认这个名字好了，最好不要带中文。然后一路回车，最后生成一个package.json

1.安装webpack

全局安装webpack:

npm -install webpack -g  //最新版本

npm install webpack@版本 -g     //指定版本

局部安装：

cd 目录
npm install webpack --save-dev

cd 目录
npm install webpack@版本 --save-dev    // 指定版本

2. 简单打包代码

以下方目录为例：

将main.js打包至dist文件夹内，在webpack文件目录下输入

webpack src/main.js dist/main.js  //webpack2

webpack src/main.js -o dist/main.js //webpack4

在dist文件夹内会自动生成一个打包文件 main.js 此时打包完成。

3.配置

webpack.config.js

每次打包都需要输入一大行代码webpack src/main.js -o dist/main.js ，很麻烦。为了使用简单的命令语句进行打包，需要写个配置文件webpack.config.js

根目录下创建webpack.config.js，写入以下神秘代码实现输入webpack直接打包

const path = require('path')

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:'dist/'
    },

此时在控制台直接输入webpack直接就会打包。

将webpack命令映射到npm run

打开package.json,在scripts中添加build元素即可。

{
  "name": "webpacks",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
    "build":"webpack"
  "author": "",
  "license": "ISC"
}

此时打包命令就是 npm run build

参考文献：https://www.bilibili.com/video/BV15741177Eh?p=105&t=60