详解webpack模块加载器兼打包工具

 什么是 webpack？

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。

你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。

webpack的官网是 http://webpack.github.io/ ，文档地址是 http://webpack.github.io/docs/ ，想对其进行更详细了解的可以点进去瞧一瞧。

1>基本介绍

在webpack中，一个css甚至一个字体都成为模块，彼此存在依赖关系，webpack就是处理模块间依赖关系的，并将它们进行打包。

各种文件格式通过特定的加载器loader编译后，最终统一生成为.js,.css,.png,.jpg等静态资源。

但是归根到底他就是有个.js的配置文件，一个构架好或者差都表现在这个配置文件中。

2>配置webpack

创建一个目录demo，npm初始化

npm init//完成后有package.json文件

本地局部安装webpack

npm install webpack --save-dev

接着安装webpack-dev-server，可以在开发环境提供很多服务，比如启动一个服务器，热更新，接口代理

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

写配置文件

在package.json中scripts里添加一个快速启动webpack-dev-server服务的脚本"dev":"webpack-dev-server --open --config webpack.config.js"

运行npm run dev的时候就会执行"webpack-dev-server --open --config webpack.config.js

其中config指向的是webpack-dev-server指向的文件路径。Open在执行时自动会在浏览器打开页面，默认地址是127.0.0.1:8080,不过ip，端口号都可以配置

3>webpack的四个核心概念：

入口(entry)、输出(output)、加载器（loader）、插件(plugins)

1》entry 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始,可以是单入口也可以是多入口

2》output 用来配置编译后的文件存储位置和文件名,只能有一个出口

• output中有path选项用来存放打包后文件的输出目录，必填
• filename用于指定输出文件的名称
• publicePath指定文件引用的目录

3》loader 对模块源代码进行转换（webpack 本身只能处理Js模块）。

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

在module对象的rules属性中可以指定一系列的loader，每一个loader都必须包括test，use两个选项。

上面代码的意思是：webpack编译过程中遇到require()或import语句导入一个后缀为.css的文件时，它将先通过css-loader转换，再通过style-loader转换，然后打包。

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
• use 属性，表示进行转换时，应该使用哪个 loader。可以是字符串或者数组，数组从后面开始编译。

const webpack = require('webpack'); //访问 webpack 运行时(runtime)
 const configuration = require('./webpack.config.js');
 let compiler = webpack(configuration);
 compiler.apply(new webpack.ProgressPlugin());
 compiler.run(function(err, stats) {
 // ...
 });

4》Plugins：可以用来解决loader无法实现的其他事。外置插件要先npm安装，然后导入插件用require()

extract-text-webpack-plugin插件可以把散落在各地的Css提取出来，并合成一个文件.

 //导入插件
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
//...
 plugins:[
 //重命名提取后的css
 new ExtractTextPlugin('main.css')
 ]
};

webpack的优点如下：

1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

2. 能被模块化的不仅仅是 JS ，所有的静态资源，例如css，图片等都能模块化，即以require的方式引入。

3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

webpack与gulp的区别

gulp合并后仍然是你写的代码，只是局部变量名被替换，一些语法做了转换而已，整体内容并没有发生改变。

Webpack打包后的代码已经不只是你写的代码，其中夹杂很多webpack自身的模块处理代码。

他们的定位是不同的。对gulp来说，他旨在规范前端开发流程。webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最新评论