浅谈webpack入门

小灰灰 2022-06-18 09:27 356阅读 0赞

在webpack看来，所有的资源文件都是模块，只是处理的方式不同。

webpack解决的需求点是：如何更好地加载前端模块。

一、首先以一个最简单的实例体验一下最简单的webpack打包文件：

1、安装node.js

访问[http://nodejs.org/dist/v7.8.0/win-x64/node.exe][http_nodejs.org_dist_v7.8.0_win-x64_node.exe]下载node.exe到目录D:/nodejs文件夹下。

2、安装npm

访问[http://nodejs.org/dist/npm/npm-1.4.9.zip][http_nodejs.org_dist_npm_npm-1.4.9.zip]下载npm，并解压到D:/nodejs文件夹下。

3、创建package.json文件

使用npm init命令可以自动创建package.json文件。

这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等。

输入这个命令后，终端会问一系列诸如项目名称，项目描述，作者等信息，如果不准备在npm中发布模块，这些问题的答案都不重要，回车默认即可。

4、安装webpack

使用npm install --save -dev webpack命令在本项目中安装webpack作为依赖包或使用npm install -g webpack命令全局安装webpack作为依赖包。

5、文件创建

在项目文件夹webpack中创建两个文件夹——app文件夹和public文件夹，app文件夹用来存放原始数据和将写的JavaScript模块（包括两个js文件Greeter.js和main.js，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件及一个index.html文件）。

Greeter.js：

module.exports = function() {
      	var greet = document.createElement('div');
      	greet.textContent = "Hi there and greetings!";
      	return greet;
    };

main.js：

var greeter = require('./Greeter.js');
    document.getElementById('root').appendChild(greeter());

index.html：

<!DOCTYPE html>
 <html>
 	<head>
 	</head>
 	<body>
 	<div id='root'></div>
 	<script src="bundle.js"></script>
 	</body>
 </html>

6、使用webpack

只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果webpack没有进行全局安装，那么在终端中使用此命令时，需要额外指定其在node\_modules中的地址。

若webpack全局安装，使用webpack app/main.js public/bundle.js命令即可。

若webpack非全局安装，需使用node\_modules\\.bin\\webpack app/main.js public/bundle.js命令。

注意：node\_modules\\.bin\\webpack的路径需用右斜杠形式，用左斜杠形式会报错。

7、结果查看

webpack同时编译了main.js 和Greeter,js。

访问file:///D:/nodejs/public/index.html，可得输出：

Hi there and greetings!

二、通过配置文件来使用webpack

webpack拥有很多其它比较高级的功能，如loaders和plugins，这些功能其实都可以通过命令行模式实现，但这样不太方便且容易出错，一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在里面。

以上面例子为例，在当根目录下新建一个名为webpack.config.js的文件，并进行配置，它包含入口文件路径和存放打包后文件的地方的路径。

module.exports = {  
    	entry: __dirname + "/app/main.js", // 唯一入口文件  
    	output: {    
    		path: __dirname + "/public",//打包后的文件存放的地方    
    		filename: "bundle.js"//打包后输出文件的文件名
      	}
    }

注：\_\_dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

若webpack全局安装，使用webpack命令即可。

若webpack非全局安装，需使用node\_modules\\.bin\\webpack命令。

这条命令会自动参考webpack.config.js文件中的配置选项打包项目，按照上面提到的结果查看方法即可查看结果。

三、更快捷的执行打包任务

执行类似于node\_modules\\.bin\\webpack这样的命令其实是容易出错的，npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可：

默认的test直接删除，设置：

"scripts": {
    	"start": "webpack"
    }

注意：添加注释//或者/\*\*/在JSON文件中是不允许的，若用js的方式添加注释会报错。

package.json中的脚本部分已经默认在命令前添加了node\_modules\\.bin路径，所以无论是全局还是局部安装的webpack，都不需要在前面指明详细的路径了。

无论是全局安装还是非全局安装，都只需要使用npm start命令，按照上面提到的结果查看方法即可查看结果。

四、生成Source Maps（调试更容易）

打包后的文件往往不容易找到出错的源代码的位置，Source Maps可以解决这个问题。  
通过简单的配置后，webpack在打包时可以生成source maps，提供一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：

<table> 
 <tbody> 
 <tr> 
 <td> devtool选项 </td> 
 <td> 配置结果 </td> 
 </tr> 
 <tr> 
 <td> source-map </td> 
 <td> 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度。 </td> 
 </tr> 
 <tr> 
 <td> cheap-module-source-map </td> 
 <td> 在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便。 </td> 
 </tr> 
 <tr> 
 <td> eval-source-map </td> 
 <td> 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项。 </td> 
 </tr> 
 <tr> 
 <td> cheap-module-eval-source-map </td> 
 <td> 这是在打包文件时最快的生成source map的方法，生成的Source map会和打包后的JS文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点。 </td> 
 </tr> 
 </tbody> 
</table>

上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响。

在学习阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开发阶段使用它；cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑da时间成本是使用。

以上述例子为例，继续配置webpack.config.js文件：

五、使用webpack构建本地服务器

webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现浏览器监测代码的修改，并自动刷新修改后的结果，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖，安装命令为npm install --save-dev webpack-dev-server。

devserver作为webpack配置选项中的一项，具有以下配置选项：

<table> 
 <tbody> 
 <tr> 
 <td> devserver配置选项 </td> 
 <td> 功能描述 </td> 
 </tr> 
 <tr> 
 <td> contentBase </td> 
 <td> 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录 </td> 
 </tr> 
 <tr> 
 <td> port </td> 
 <td> 设置默认监听端口，如果省略，默认为8080 </td> 
 </tr> 
 <tr> 
 <td> inline </td> 
 <td> 设置为true，当源文件改变时会自动刷新页面 </td> 
 </tr> 
 <tr> 
 <td> colors </td> 
 <td> 设置为true，使终端输出的文件为彩色的 </td> 
 </tr> 
 <tr> 
 <td> historyApiFallback </td> 
 <td> 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html </td> 
 </tr> 
 </tbody> 
</table>

以上述例子为例，继续配置webpack.config.js文件：

module.exports = {
      	devtool: 'eval-source-map', // 配置生成Source Maps，选择合适的选项
    	entry:  __dirname + "/app/main.js", // 已多次提及的唯一入口文件
    	output: {
    		path: __dirname + "/public", // 打包后的文件存放的地方
    		filename: "bundle.js" // 打包后输出文件的文件名
    	},
      	devServer: {
        	contentBase: "./public", // 本地服务器所加载的页面所在的目录
        	colors: true, // 终端中输出结果为彩色
        	historyApiFallback: true, // 不跳转
        	inline: true // 实时刷新
      	}	
    }

webpack有两个重要的功能：Loaders和Plugins。

有关Loaders的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/69053556][http_blog.csdn.net_zhouziyu2011_article_details_69053556]。

有关Plugins的介绍请见：[http://blog.csdn.net/zhouziyu2011/article/details/69053647][http_blog.csdn.net_zhouziyu2011_article_details_69053647]。

[http_nodejs.org_dist_v7.8.0_win-x64_node.exe]: http://nodejs.org/dist/v7.8.0/win-x64/node.exe
[http_nodejs.org_dist_npm_npm-1.4.9.zip]: http://nodejs.org/dist/npm/npm-1.4.9.zip
[http_blog.csdn.net_zhouziyu2011_article_details_69053556]: http://blog.csdn.net/zhouziyu2011/article/details/69053556
[http_blog.csdn.net_zhouziyu2011_article_details_69053647]: http://blog.csdn.net/zhouziyu2011/article/details/69053647