webpack简单入门

作者：TG 日期： 2017-02-12 字数： 18391 阅读： 8572

今天来简单地介绍一下webpack的使用！

1、什么是webpack？

webpack是时下比较流行的模块加载器兼打包工具，它能把各种资源，例如JavaScript代码、样式（含less/sass）、图片等作为模块来进行分析、压缩、合并、打包。

2、为什么使用？

现在网页的功能越来越多了，它们拥有着复杂的JavaScript代码、一大堆依赖包等资源，也是因此我们在开发时，不时会遇到以下的一些问题：

多次加载同一个库
依赖加载混乱
不时会引入多余的CSS或JavaScript代码或文件
不方便优化资源

webpack 能轻易地处理上述问题, 它会通过 JavaScript 来管理模块依赖和加载顺序。

3、简单安装

在这里，我们用npm命令来安装webpack，所以你的电脑上首先的有npm，可以点击这里来安装：Node.js。(新版本的nodejs中包含了npm)

全局安装：

npm install webpack -g

此时 webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。

4、简单入门

首先创建一个文件夹demo，然后使用cmd命令行定位到这个文件目录（比如：D盘中的demo）下，然后执行下面的命令：

npm init // 初始化npm

执行这个命令后，你会看到demo文件夹里多了一个package.json文件，它是npm的一个配置文件，包括当前项目的依赖模块，自定义的脚本任务等等。

此外，在执行npm init时，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

而对于webpack的安装，通常我们会将 webpack 安装到项目的依赖中，这样就可以给不同的项目使用不同版本的webpack。

安装命令如下：

npm install webpack --save-dev

接着再新建两个文件夹，分别命名为app和public。其中app文件夹用来存放原始数据和JavaScript模块；public文件夹用来存放HTML以及打包后的JS文件。

接着在public文件夹里创建一个静态页面index.html，添加如下代码：

<html>  
  <head>   
    <meta charset="utf-8">  
  </head>  
  <body>
  <!--bundle.js是打包后的js文件-->   
  <script src="bundle.js"></script>  
  </body>  
</html>

再在app文件夹里新建一个JS入口文件entry.js，添加如下代码：

document.write('Hello World!');

打包

在上面，我们把基础文件都创建好了，接下来看看如何打包！

运行如下命令就可以把entry.js编译成bundle.js，文件目录中多了一个bundle.js：

webpack app/entry.js public/bundle.js

这样执行后，你会看到public文件夹下多了一个bundle.js，这就是webpack打包后的js文件，也是我们的HTML文件中需要引入的文件。

现在，你可以双击public文件夹中的index.html文件，你会在浏览器中看到输出的“Hello World！”。

配置文件

上面是比较简单的代码打包，而对于复杂的项目，我们一般通过配置文件(webpack.config.js)来配置打包，所以在demo文件夹中创建webpack.config.js文件，然后添加如下代码：

module.exports = {   
  entry: __dirname + '/app/entry.js',   
  output: {   
    filename: 'bundle.js',   
    path: __dirname + '/public'
  }  
}

在上方的配置中，entry就是我们的入口文件，可以有多个入口文件，而output即为webpack打包的输入对象，filename为输出文件名，path为输出路径。

在这里，我们还使用了一个特殊变量：“__dirname”（双下划线），它是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

配置好了，接着我们只需运行如下命令：

webpack --config webpack.config.js

当然，你也可以直接运行下面的命令：

webpack

webapck会自动去寻找当前目录下的webpack.config.js文件。

5、资源压缩

如果我们需要对打包后的代码进一步压缩处理，我们可以运行命令：

webpack -p

其他命令：

webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包   
webpack --watch   //监听变动并自动打包   

webpack -p    //压缩混淆脚本   

webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里

6、强大的Loaders

webpack只能处理原生js模块，但是loaders可以将各种资源转换为js模块，但在使用前，我们需要安装Loader。当然，Loader不止一种：

npm install css-loader style-loader url-loader babel-loader  --save-dev

css-loader：CSS文件处理
style-loader：为了在html中以style的方式嵌入css
url-loader：图片资源处理
babel-loader：处理包含ES6、JSX等文件

注：--save-dev就是声明在开发阶段需要用到webpack，并且自动把webpack依赖写到package.json配置文件上面，生产环境就不需要安装。

所有 loader 最终的输出都是返回字符串。这使得 webpack 可以把他们都打包进 Javascript 模块当中。

配置loaders

安装完各个loader后，我们还需要在webpack.config.js中配置一下，以便加载进需要的loader。

我们需要添加module.loaders ，这是最关键的一个配置。它告知 webpack 对每一种文件都需要使用什么加载器来处理。

loaders是一个数组，里面元素都是一个对象，每个对象都有相应的参数：

test：必须，一个匹配loaders所处理的文件的拓展名的正则表达式；
loader：必须，相应loader的名称
include/exclude：可选，手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）；
query：可选，为loaders提供额外的设置选项

接着上面的例子，我们修改一下webpack.config.js中的代码：

module.exports = {      
  entry: __dirname + '/app/entry.js',      
  output: {       
    filename: 'bundle.js',      
    path: __dirname + '/public'      
  },      
  // 新添加的module属性      
  module: {      
    loaders: [          
      { test: /\.css$/, loader: "style!css" },      
      { test: /\.(jpg|png)$/, loader: "url?limit=8192" }   
    ]      
  }     
}

在上面的例子中，匹配到文件后缀名尾.js就用babel-loader，匹配到文件后缀名为.css的就先用css，最后用style处理。不同的处理器通过 ! 分隔并串联起来。

此外，处理图片时，limit=8192的意思是不大于8KB（1024×8）的图片才会被打包处理为base64的图片

注意：这里我们省略掉 -loader ，也就是原本应该写成 style-loader!css-loader，我们可以写成style!css。

我们在上面创建的app文件夹里新建一个style.css文件，往里面添加如下代码：

body { background: red; }

修改一下entry.js：

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('Hello World!');

然后再执行一次：

webpack

刷新一下浏览器中的index.html页面，你会看到背景变红了！

7、插件

webpack还提供了很多插件，插件可以完成更多 loader 不能完成的功能。一般是在 webpack 的配置信息 plugins 选项中指定。webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

示例：

如果使用内置的插件，首先要加载webpack：

var webpack = require('webpack')

然后就可以在plugins里添加插件，比如下面的BannerPlugin，用来给文件头部添加注释信息的：

plugins: [
  new webpack.BannerPlugin('头部注释')
]

8、调试

开发总是离不开调试。而Source Maps就是为调试而生的。

在webpack的配置文件中配置source maps，需要配置devtool，它有以下7种不同的配置选项：

eval：每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.
source-map：在一个单独的文件中产生一个完整且功能完全的SourceMap文件。
hidden-source-map：和 source-map 一样，但不会在 bundle 末尾追加注释。
inline-source-map：生成一个 DataUrl 形式的 SourceMap 文件.
cheap-source-map：生成一个没有列信息（即同行显示）的SourceMaps文件，不包含loader的 sourcemap（比如 babel 的 sourcemap）
eval-source-map：使每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap。
cheap-module-source-map：生成一个没有列信息（即同行显示）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

webpack 不仅支持这 7 种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，比如，你可以设置 souremap 选项为 cheap-module-inline-source-map。

目前个人对这7种模式还不是完全了解，如有好的文章可告知！

配置示例：

module.exports = {   
  devtool: 'eval-source-map',  // 配置生成Source Maps 
  entry:  __dirname + "entry.js",   
  output: {   
    path: __dirname + "/dist",   
    filename: "bundle.js"   
  }  
}

9、开启服务

使用webpack，我们还可以构建一个简单的本地服务，不过这个本地服务器是基于Node.js的，所以我们需要安装它：

npm install webpack-dev-server --save-dev

然后运行以下命令：

webpack -dev-server

上面的命令执行完毕后，我们就可以通过127.0.0.1:8080/public 或者localhost:8080/public 访问public文件夹中的index.html页面了！

当然，我们还可以在配置文件webpack.config.js配置服务相关的参数：

devServer: {   
  contentBase: "./public",
  colors: true,
  historyApiFallback: true,
  inline: true,
  port: '8080'   
}

参数说明：

contentBase：默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port：设置默认监听端口，如果省略，默认为”8080“
inline：设置为true，当源文件改变时会自动刷新页面
colors：设置为true，使终端输出的文件为彩色的
historyApiFallback：在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

当需要停止本地服务器时，你可以输入Ctrl+c终止。

总结

到这里，相信你已经入门webpack了！如果你想了解更多关于webpack，可进入这里：传送门

如有错误或建议，欢迎在下方的评论区留言！

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

webpack简单入门

关注”全栈技术杂货铺“

目录