秒学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 重新指定配置文件
posted @ 2017-04-08 18:04  明阳春秋  阅读(170)  评论(0)    收藏  举报