webpack打包项目

系统管理员 2023-06-30 08:59 26阅读 0赞

*前端小白，第一次写博文，也算理理自己的理论，有错请指教，各位大佬勿喷蟹蟹٩(‘ω’)و*

### 文章目录 ###

*  一、安装配置webpack
 *   *  1.webpack的定义
     *  2.webpcak的安装
     *  3.webpack的配置
     *   *  在package.json中配置webpack运行命令
         *  入口文件配置(entry)
         *  出口文件配置(output)
         *  webpack的模式(mode)
 *  二、各种类型文件打包
 *   *  1、打包css文件
     *  2、打包处理less
     *  3、打包处理sass
     *  4、打包处理和url路径有关的文件（图片文件等）
 *  三、关于工具和插件(plugins)
 *   *  1.实现webpack自动打包功能（工具）
     *  2.实现打包完成即时生成预览页面（插件）

# 一、安装配置webpack #

## 1.webpack的定义 ##

webpack是什么？官方文档的定义：

> webpack是一个现代Javascript应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

我理解的webpack做的事情是：它先找到你打包开始的入口文件(entry)，然后根据你入口文件中的依赖关系（一大堆的导入导出渲染等），顺藤摸瓜的把所有文件打包到一个出口文件中(output)。

## 2.webpcak的安装 ##

那么，怎么安装webpack呢？  
webpack安装：在命令行输入

npm install webpack webpack-cli -g

=>这里我是用的是**全局安装**webpack（代码中的-g 即 --globle），之前我在其他项目底下使用局部安装，结果在其他项目目录下要使用webpack频频出错（一直提示我安装webpack-cli），官方文档推荐使用本地安装（[指路官方文档][Link 1]），为了方便使用我直接全局安装，如果有谁碰到和我一样的问题（小白笑哭），指路这位大佬的博文–>[webpack坑系列–安装webpack-clit][webpack_webpack-clit]，讲的很清楚了蟹蟹

安装好出现这个：  
![在这里插入图片描述][20200116173116386.png]就说明全局安装成功，也可以在命令行输入`webpack -v`和`webpack-cli -v`查看webpack版本，如果出现版本号就说明安装成功了（如下）。  
![在这里插入图片描述][20200116173342420.png]

## 3.webpack的配置 ##

webpack的配置都在webpack配置文件中，即我们自己要先在根目录中创建一个配置文件`webpack.config.js`。

### 在package.json中配置webpack运行命令 ###

为了**运行方便**，我们在`package.json`文件中找到`scripts`节点，作如下修改：

scripts:{ 
    	"dev":"webpack"
    }

这个意思是在命令行用`npm run dev`命令就可以开始打包了！

### 入口文件配置(entry) ###

入口文件就是指你**打包开始的主文件**，默认值为`./src`，也可以自己设置入口文件。  
就我而言，我打包的入口文件是`app.js`，因为这是我项目的主文件，也是我所有依赖关系开始的主文件。

webpack.config.js

modules.export = { 
    	entry:'./app.js'
    }

### 出口文件配置(output) ###

入口文件都可以配置了，出口文件当然也可以。它在`output`中配置，默认出口文件为`./dist/bundle.js`。如若要自己配置，如下：

webpack.config.js

modules.export = { 
    	entry:'./dist/vue-bundle.js'
    }

意思是打包到dist文件夹里的vue-bundle.js文件里。

### webpack的模式(mode) ###

webpack模式有两种，即`development`和`production`，两种模式打包出来的文件略微有些差别，后者被压缩得更小。开发阶段推荐使用`development`，上市阶段再使用`production`。

指定开发模式，在`webpack.config.js`文件中添加如下节点：

module.exports = { 
    	mode:'development'	//意思是用开发模式打包文件
    }

# 二、各种类型文件打包 #

这里要说一下，**webpack打包只能自动打包js文件，其他的非js文件是没法自动打包的**，因此，我们需要添加对应文件的`loader`。实际上，`loader`起到的作用是：将对应的文件类型转为可处理的有效模块，然后再由webpack进行处理。

## 1、打包css文件 ##

第一步，安装`style-loader css-loader`，在命令行这样写：

npm install style-loader css-loader -d

没有出现`ERR`就说明没有问题。

第二步，在webpack.config.js里面添加如下节点：

module:{ 
    	rules:[
    		{ test:/\.css$/,use:['style-loader','css-loader']}
    	]
    }

=>这里要解释一下：`rules`是所有第三方模块的匹配规则，它的值是一个数组，数组的元素是一个对象，每个对象都相应匹配一个第三方模块的规则。**注意！！！每个对象都至少包括两个属性，test和use！！！**`test`指要匹配的文件后缀，`use`指对应的第三方模块`loader`(就是你刚才安装的的`loader`啦！)

## 2、打包处理less ##

第一步，安装`less-loader`：

npm install less less-loader -d

第二步就在`webpack.config.js`中这样写：

module:{ 
    	rules:[
    		{ test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    	]
    }

## 3、打包处理sass ##

第一步，安装`less-loader`：

npm install sass-loader  node-sass -d

第二步就在`webpack.config.js`中这样写：

module:{ 
    	rules:[
    		{ test:/\.sass$/,use:['style-loader','css-loader','sass-loader']}
    	]
    }

## 4、打包处理和url路径有关的文件（图片文件等） ##

第一步，安装`url-loader`：

npm install url-loader  file-loader -d

第二步就在`webpack.config.js`中这样写：

module:{ 
    	rules:[
    		{ 
    			test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
    			use:'url-loader?limit = 16940'
    		}
    	]
    }

=>注意,这里的`limit`是用来限制文件大小的。

# 三、关于工具和插件(plugins) #

> *目前仅用过2个工具或者是插件，后续有用到其他再补充~*

## 1.实现webpack自动打包功能（工具） ##

为什么要实现自动打包功能？**方便**。在程序打包完成后，出于一些原因，我们又要对程序进行修改，修改后我们又要重新在命令行运行`npm run dev`命令来打包项目。好吧，这只是修改一次，如果修改很多次代码呢？继续打包？我就问你烦不烦？  
自动的打包的好处就在这里，当你运行一次`npm run dev`后，后续代码如果有再修改，**他会帮你自动打包而不需要你手动打包**。那么，怎么实现呢？  
第一步，在命令行安装自动打包工具`webpack-dev-server`：

npm install webpack-dev-server

第二步，修改package.json -> scripts节点的`dev` 如下：

"scripts":{ 
    	"dev" : "webpack-dev-server"
    }

第三步，命令行运行命令`npm run dev`即可。

## 2.实现打包完成即时生成预览页面（插件） ##

这个插件能实现在打包完成的一瞬间即时生成预览页面。

第一步，在命令行运行如下命令，安装自动生成预览页面插件`html-webpack-plugin`：

npm install html-webpack-plugin

第二步，在webpack.config.js文件中添加如下配置信息：

const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HtmlPlugin = new HtmlWebpackPlugin({  //获取插件实例对象
    	template:'./src/index.html', //要自动打开的文件路径
    	filename:'index.html' //生成的文件名称，该文件存在于内存中，其实是看不到的
    });

第三步，添加插件节点信息：

modules.export = { 
    	plugins:[HtmlPlugin] //plugins属性值为一个数组，包含了打包过程中会用到的插件
    }

第四步，这一步主要是配置一些打包的其他信息。打开`package.json`文件，在其中找到`scripts`结点，作如下改动：

//--open 打包完成后自动打开浏览器页面
    //--host 配置IP地址
    //--port 配置端口
    "scripts":{ 
    	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
    }

然后就可以啦！

*目前先写到这里，如果还有其他后续再补充，谢谢看到这里的小伙伴啦！*

[Link 1]: https://www.webpackjs.com/guides/installation/
[webpack_webpack-clit]: https://segmentfault.com/a/1190000013699050?utm_source=tag-newest
[20200116173116386.png]: https://img-blog.csdnimg.cn/20200116173116386.png
[20200116173342420.png]: https://img-blog.csdnimg.cn/20200116173342420.png