webpack 简单入门

2,769 阅读9分钟
今天来简单地介绍一下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


接着再新建两个文件夹,分别命名为apppublic。其中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


我们在上面创建的public文件夹里新建一个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,可进入这里:传送门


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