秒学webpack（一）

基本概念：webpack是一个前端资源管理和打包工具。将松散的模块按照依赖和规则打包成生产环境的前端资源。可以按需求加载进行分隔。等到在异步加载。CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 

 

为什么还要开发webpack？

目前的打包工具没有一些功能，比如代码分隔，分块传输懒加载。整合第三方类库。每 个部分都可以自定义。loader，插件系统模块热更新。

• 将依赖树拆分成按需加载的块
• 初始化加载的耗时尽量少
• 各种静态资源都可以视作模块
• 将第三方库整合成模块的能力
• 可以自定义打包逻辑的能力
• 适合大项目，无论是单页还是多页的 Web 应用

webpack特点：

1.代码分隔：webpack有两种组织模块依赖的方式，同步和异步。异步依赖作为分隔点，形成一个新模块。每一个异步成为一个新模块。

2.loader：webpack本是只能处理原声javascript模块，但loader可以将各种资源转换成javascript模块，这样任何资源都可以用webpack处理。

3.智能解析：可以使用智能表达式

4.插件：丰富的插件

5.快速运行： 异步I/O和多级缓存，可以使webpack能以难以置信的速度快速增量编译

 

为什么要使用代码分隔？

模块加载和传输，首先由两种方法，一种是每个模块单独添加，另一种都打包为一个块，单独添加http请求过多，只打包一个模块，会导致启动速度过慢，流量浪费，初始化慢。都过于简单粗暴。

分块传输，按需进行懒加载，实际用到在进行更新，是较为好的方案。这需要对整个代码库进行模块静态分析、编译打包。

 

 

 

webpack安装：

全局安装

npm install webpack -g      

项目安装

npm install webpack --save-dev

两个坑？1.必须先进行全局安装 2.文件夹名不能为webpack。

 

webpack简单命令使用

webpack hello.js hello.bundle.js

webpack 要打包文件 打包后文件名

 

loader特性

• Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader
• ，但是最后一个 loader 必须返回 JavaScript。
• Loader 可以同步或异步执行。
• Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
• Loader 可以接受参数，以此来传递配置项给 loader。
• Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
• Loader 可以通过 npm 发布和安装。

使用Loader 可以在 require() 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。

0.安装

npm install css-loader style-loader

1.直接在引用处理实例

require('style-loader!css-loader!./style.css ')

2.在命令行下使用

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

Loader 可以访问配置。

插件可以让 loader 拥有更多特性。

Loader 可以分发出附加的任意文件。

3.配置文件下使用

跳转下章一起看哈

 

配置文件

默认情况下:会搜索当前目录的 webpack.config.js 文件

也可以--config命令参数指定具体的命令

 

npm install css-loader style-loader --save-dev     --save-dev 后缀可以理解为，脚本需要的文件，不需要打包到前端

const path = require('path');

module.exports = {

    entry: './entry.js',

    output: {

        path: path.resolve(__dirname, "dist/js"),

        filename: 'bundle.js'

    },

    module: {

        loaders: [

          {test: /\.css$/, loader: 'style-loader!css-loader'}

        ]

    }

}

entry可以为字符串，字符串数据，对象

entry: {

  home: "./home.js",

  about: "./about.js",

  contact: "./contact.js"

}

但是还是只会输出一个文件

如何输出多个文件？

output当是单输入，只会输出一个文件，当时多输入时，如果也只写静态文件也只会返回一个静态文件。

解决方法：使用站位符号保证文件不会被覆盖

 

常用的占位符

Template    Description

[hash] ：：唯一得模块代号打包时候显示的

[chunkhash] ：：md5算法只有修改后的文件hash值会不一致，git可以只上线被修改的文件

[name] ：:也就是entry里面的key

[id] ：：The module identifier

[file] ：：The module filename

[filebase] ：：The module basename

[query] ：：The module query, i.e., the string following ? in the filename

使用占位符方法

     filename: '[name]-[chunkhash].js]'

 

配置npm脚本

 

命令行指定处理方法

 

命令行下webpack常用参数

--watch：显示过程

--progress： 看到读条

--display-modules 列出引用模块

--display-reasons 为什么打包这个模块

--config 重新指定配置文件