webpack2.0入门学习_byKL

时间 2019-11-07

标签 webpack2.0 webpack 入门学习 bykl 繁體版

原文原文链接

webpack入门

首先什么是webpack？css

webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统，你能够根据本身的须要来进行一系列的配置和安装，最终实现你须要的功能并进行打包输出。html
在 Webpack 当中, 全部的资源都被看成是模块, js, css, 图片等等..所以, Webpack 当中 js 能够引用 css, css 中能够嵌入图片 dataUrl对应各类不一样文件类型的资源, Webpack 有对应的模块 loader,好比 CoffeeScript 用的是 coffee-loader, 其余还有不少:http://webpack.github.io/docs/list-of-loaders.html前端
代码分离:Webpack有两种依赖声明方式：同步与异步。异步方式，将依赖分割成多个节点，而后每一个节点造成一个新的文件块。通过优化后的文件块树，会以一个个文件形式分发出去（仅仅打包成一个大文件形式是很低效的，详见）。node
加载器插件:原生的Webpack只能处理JS文件，使用加载器插件，能够将其余资源专为JS资源。经过这种方式来加载，每一种资源均可以被Webpack看做是一个模块来加载。webpack
智能模块解析:Webpack内置一个智能加载模块，能够用于处理几乎全部的第三方库。它甚至能够解析依赖声明的表达式，好比 require("./templates" + name + ".jade")。Webpack会处理最多见的JS模块标准：CommonJS 和 AMD。git
插件系统:Webpack的最大特色，就是配套了很是丰富的插件系统。大部份内置特性功能都是基于这套插件系统。它可让你根据须要自定义Webpack，将通常插件做为开源项目发布出去。github

安装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 <pkg> --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
└─┬ webpack@2.2.1 
  └─┬ node-libs-browser@2.0.0
    └─┬ crypto-browserify@3.11.0
      └─┬ browserify-sign@4.0.0
        └─┬ elliptic@6.3.3 
          └── brorand@1.0.7 
          
          
#安装后会多了一个目录,就是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里面,主要目录须要绝对路径web

关于webpack的基本效果

在不依赖任何自动化、模块化工具的项目中，一般咱们的代码是这样的：shell

<html>
  <head>
    <title>传统项目</title>
  </head>
  <body>
    <script src="js/index.js"></script>
  </body>
</html>

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

main();

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

若是依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。
若是包含依赖项但没有使用，那么浏览器必须下载不少没必要要的代码。
当咱们js文件愈来愈多(一个模块一个js文件),http请求也会变得不少,须要合并js
多js模块的全局做用域的污染问题

因此为了解决以上问题，咱们须要使用webpack来实现一些改变。

打包

webpack.config.js

webpack.config.js位于当前项目文件夹根位置,这个文件须要本身建立
这个文件其实就是webpack处理参数的合集,经过一个文件进行管理

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

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

To achieve this CommonJS gives you two tools:

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

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

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文件进行开发,开发后进行合并,实现模块化

<html>
<head>
    <title>传统项目</title>
</head>
<body>
<!--<script src="app/index.js"></script>-->
<script src="dist/bundle.js"></script>
</body>
</html>

引用参考:

1. vue-cli学习入门_byKL
2. webpack2.0学习
3. babel6 入门-配置安装使用_byKL
4. webpack2.0
5. webpack2.0+ vue2.0
6. vue2.0 + webpack2.0 配置
7. dubbo入门学习
8. OpenGL入门学习
9. Netty入门学习
10. Markdown入门学习
更多相关文章...
• Memcached入门教程 - NoSQL教程
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• YAML 入门教程
• Tomcat学习笔记（史上最全tomcat学习笔记）