当前位置:首页 >> 网络编程

详解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更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。

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