Webpack介绍:基本概念和配置示例

By
写代码

刚开年,手头任务还不多,大家都趁着这个时间抓紧学习一些平时感兴趣,但是没大块时间整理和琢磨的技术。趁着这段时间,看了一下webpack打包工具,简要整理了一些笔记。作为一个连NPM还没接触过的小白,本篇的介绍可能略显冗长。感兴趣的话可以去Github看整理的项目(我竟然也有github):

webpack-simple-demo

什么是NPM
NPM(node package manager),node包管理器。功能室管理node包,包括:安装、卸载、更新、查看、搜索、发布等。
npm的背后,是个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。
npm包安装模式,加—g会全局安装,默认本地安装,即只在本目录可以执行该包。一般grunt、npm等需要全局安装。

常用npm命令(xxx是包名):

> 安装:npm install xxx
*npm install webpack --save-dev //安装webpack到本地目录,并保存信息到devDependencies(如果—save则保存到dependencies,其他类似)

> 卸载:npm uninstall xxx

> 查看:npm ls列出所有包信息;npm ls pkg查看指定的package的信息

> 升级:npm update xxx

> 搜索:npm search xxx

如果项目包有了package.json,可以npm install一键安装所有包

什么是webpack
webpack能把各种资源如js、样式(css、sass等)、图片等都作为模块来使用和处理。可以直接使用require(xxx)来引入各个模块(未经编译的sass也可以直接引用)。配置对应的加载器(loader)来处理。

使用webpack优势

> webpack以commonJS书写,同时也支持AMD/CMD;

> 各种资源都可以模块化;

> 打包、混淆代码、图片转base64都可以执行;

> 实时监听文件修改,无需手动刷新浏览器即可以看到修改效果;

> 支持react热插拔。

package.json

package.json为npm使用,也是该应用的启动入口

配置完该项,可以通过npm run build/start直接运行

运行:

npm init初始化

webpack.config.js

webpack.config.js是供webpack和webpack-dev-server使用的配置文件。

? chunk是什么:code splitting 后的产物,也就是按需加载的分块,装载了不同的 module。

实例可参考:Github-webpack examples

1、入口(Entry Points)

基本格式:

e.g.

单一入口:

基本格式:

:vendor一般指一些第三方依赖,例如jQuery、Vue等;app一般指项目代码。

多页应用:

基本格式:

*CommonsChunkPlugin提取每个页面间的应用共享代码创建 bundle

格式:

为依赖放置于不同js模块的文件,创建共享bundle和单独的bundle,这样,在页面里不必依次引用一堆js文件。解决引用次序不同而造成的错误。

单入口简写:entry: string|Array

2、出口(Output):

基本格式:

3、加载器(Loader):

loader能转换各类资源,并处理成对应模块的加载器。loader 间可以串行使用。

可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。

基本格式:

常用加载器:

> raw-loader:以原始内容加载文件

> val-loader:以模块方式执行代码并考虑以js形式exports

> file-loader:将文件发布到输出目录,并返回url地址(本地json形式的接口以这种方式加载)

> url-loader:和fileloader类似,但是如果文件小于指定大小,会返回数据的Data Url(如图的base64地址)

4、插件(Plugins):

插件最常用于(但不限于)在打包模块的“编译(compilation)”和“分块(chunk)”时执行操作和自定义功能。使用插件,你只需要 require() 它们,并且把它们添加到 plugins 数组。

基本格式:

常用插件:

> common-chunks-webpack-plugin:生成入口的公共模块,并分到不同的bundle里

> extract-text-webpack-plugin:从bundle里提取css到单独的文件

> component-webpack-plugin:使用components

> compression-webpack-plugin:压缩版本

> html-webpack-plugin:创建html用

> i18n-webpack-plugin:国际化支持

3、webpack dev server

webpack.config.js的config中配置格式:

*其中contentBase所指的目录下必须有一个index.html文件,以供页面渲染使用。

webpack-dev-server(配置项目参考https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli)

自动编译:webpack-dev-server --watch

项目实例

搭建vue+webpack+mock脚手架(一)
Github-基于webpack的前端工程化方案

4、使用插件

4.1插件安装

很多插件都支持npm方式安装。可以使用underscore@x.x.x安装指定的插件版本。

npm install underscore —save-dev安装插件。

如果npm库中没有该插件或者是自定义插件,可以直接以js方式保存到本地目录里。

4.2插件使用

有两种方式使用插件:

a、在要使用的地方用require调取

如Vue可以使用var Vue = require(‘vue’),之后可以在该文件里直接使用Vue.component等方式使用。

b、config.plugins里使用

5、压缩

使用UglifyJsPlugin压缩js代码

pulgins里设置

使用html-minifier压缩html代码

可以配合html-webpack-plugin使用,在minify中传入html-minifier的配置项

6、使用json接口

配置

js文件中使用

加载为file

7、扩展:

1、webpack官方Github
2、源码解读:命令行输入webpack的时候都发生了什么?
3、webpack-dev-server文档

Comments: 5

  1. 哇哦,阿修还在持续更新,好样的。

    @alswl 02月19日
    • @alswl 嗯嗯,没啥事的时候写着玩呗

      @venmax 03月08日
  2. 学无止境,加油哦

    02月20日
  3. 现在不折腾这个了

    02月25日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: