webpack2.0入门学习_byKL

webpack入门

首先什么是webpack？

• webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。

• 在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl对应各种不同文件类型的资源, Webpack 有对应的模块 loader,比如 CoffeeScript 用的是 coffee-loader, 其他还有很多:http://webpack.github.io/docs/list-of-loaders.html

• 代码分离:Webpack有两种依赖声明方式：同步与异步。异步方式，将依赖分割成多个节点，然后每个节点形成一个新的文件块。经过优化后的文件块树，会以一个个文件形式分发出去（仅仅打包成一个大文件形式是很低效的，详见）。

• 加载器插件:原生的Webpack只能处理JS文件，使用加载器插件，可以将其他资源专为JS资源。通过这种方式来加载，每一种资源都可以被Webpack看作是一个模块来加载。

• 智能模块解析:Webpack内置一个智能加载模块，可以用于处理几乎所有的第三方库。它甚至可以解析依赖声明的表达式，比如 require("./templates" + name + ".jade")。Webpack会处理最常见的JS模块标准：CommonJS 和 AMD。

• 插件系统:Webpack的最大特点，就是配套了非常丰富的插件系统。大部分内置特性功能都是基于这套插件系统。它可以让你根据需要自定义Webpack，将一般插件作为开源项目发布出去。

安装webpack

# 新建demo文件夹并打开
mkdir demo && cd demo 

#初始化npm，生成package.json配置文件
npm init  


#结果
➜  npm init         
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

#这些配置项根据需要填写,不过也可以直接修改package.json文件
Press ^C at any time to quit.
name: (demo) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to .....package.json:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) 

#查看当前目录,生成了一个package.json,webpack就是使用这个文件进行模块,依赖查找安装的
➜ls
package.json

npm install --save webpack // 安装webpack

#安装结果
ck
└─┬ [email protected] 
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └─┬ [email protected] 
          └── [email protected] 
          
          
#安装后会多了一个目录,就是npm的模块的目录
node_modules package.json         

需要注意的是,这个webpack安装的是在目录里面的,并不是在全局目录,所以可能会出现无法调用webpac命令: command not found: webpack
1.要么安装全局webpack: npm i -g webpack
2.使用局部目录的webpack: ./node_modules/.bin/webpack,可以将他添加到.bash_profile里面,主要目录需要绝对路径

关于webpack的基本效果

在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的：

function main() {
    alert("hello");
}

main();

这样管理JavaScript项目有一些问题：

1. 如果依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。

2. 如果包含依赖项但没有使用，那么浏览器必须下载很多不必要的代码。

3. 当我们js文件越来越多(一个模块一个js文件),http请求也会变得很多,需要合并js

4. 多js模块的全局作用域的污染问题

所以为了解决以上问题，我们需要使用webpack来实现一些改变。

打包

webpack.config.js

1. webpack.config.js位于当前项目文件夹根位置,这个文件需要自己创建

2. 这个文件其实就是webpack处理参数的合集,通过一个文件进行管理

module.exports = {  //这是commonJS的导出语法
    entry: './app/index.js', //entry就是我们的入口文件，可以有多个入口文件,是webpack打包的输入对象
    output: { //output即为webpack打包的输出对象
        filename: 'bundle.js',//filename为输出文件名
        path: './dist' //path为输出路径
    },
}

1. CommonJS中的exports.xxx=xxx或者module.exports=xxx，以及AMD中的return xxx都叫导出，导出后外部模块引用时就可以使用被导出的部分。没导出的部分将作为模块私有部分，外部无法访问

2. To achieve this CommonJS gives you two tools:

   1. the require() function, which allows to import a given module > into the current scope.

   2. the module object, which allows you to export something from > the current scope.

3. module.exports会告诉webpack使用commonJS来处理导出模块

进行打包命令:webpack app/index.js dist/bundle.js

Hash: 3c42ca5bcbeae36c37dd
Version: webpack 2.2.1
Time: 76ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.79 kB       0  [emitted]  main
   [0] ./app/index.js 64 bytes {0} [built]
   [1] ./dist/bundle.js 0 bytes {0} [built]
   [2] multi ./app/index.js ./app/index.js ./dist/bundle.js 52 bytes {0} [built]

成功进行了打包,打包之后就会生成了一个./dist/bundle.js合并的js文件,所以html引用js的需要修改为打包后的合并的js文件,这样就可以实现网页使用打包的js文件了,打包之前可以多个js文件进行开发,开发后进行合并,实现模块化

引用参考:

1. http://www.jianshu.com/p/1a8ab33c2649

2. https://segmentfault.com/a/1190000006928799

3. https://segmentfault.com/a/1190000008032524

4. https://segmentfault.com/a/1190000005118282

5. https://webpack.toobug.net/zh-cn/chapter4/exports-loader.html

6. https://webpack.github.io/docs/commonjs.html