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 <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.jsonnpm 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里面,主要目录需要绝对路径
关于webpack的基本效果
在不依赖任何自动化、模块化工具的项目中，通常我们的代码是这样的：
<html>
<head>
<title>传统项目</title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>function main() {
alert("hello");
}
main();
这样管理JavaScript项目有一些问题：
如果依赖项丢失，或者包含在错误的顺序中，应用程序将不会运行。
如果包含依赖项但没有使用，那么浏览器必须下载很多不必要的代码。
当我们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>引用参考:
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
