首页 > 代码库 > 1.webpack-----模块加载器兼打包工具
1.webpack-----模块加载器兼打包工具
一、webpack的优势
1. 能模块化 JS 。
2. 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
3. 扩展性强,插件机制完善,特别是支持 React 热插拔)的功能让人眼前一亮
二、webpack--如何安装
1. 全局安装 node.js
webpack基于node环境使用,只安装一次node环境就可以了。
2. 全局安装 Webpack
我们希望能够在系统的任何文件夹中使用 Webpack,使用的方式是通过 Webpack 命令来完成的,这需要我们全局安装 Webpack。这也只需要安装一次,以后每个项目就不需要重新全局安装了
$ npm install webpack -g
3. 在项目中安装 Webpack
最好在你的项目中也包含一份独立的 Webpack,这样你更方便管理你的项目。为什么又是全局安装,又是局部安装呢?可以参考,待定。
3.1 确认创建 NPM 项目文件
首先,你需要已经创建了 NPM 的项目文件,如果没有的话,使用 init 命令创建它。
npm init
你需要回答一系列问题。最终你会得到一个名为 package.json 的 NPM 项目文件,如果你愿意的话,手工创建它也不错。甚至你可以直接复制一个过来。
一个新创建的 package.json 内容应该如下所示。
{ "name": "w1", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": {}, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
3.2 在项目中安装 Webpack
现在,可以在项目中安装 Webpack 了,直接使用 NPM 的 install 命令。
npm install webpack --save-dev
时候,你再检查一下 package.json 文件,它应该多了三行。
{ "name": "w1", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": {}, "devDependencies": { "webpack": "^1.13.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
4. Hello, Webpack
4.1 打包普通脚本文件
写一段普通的脚本,例如,一个 Hellowrold 脚本。当然了,这里应该是 Hello,Webpack.
function hello(){ alert("Hello, Webpack!"); }
保存到你的项目根目录中,文件名就叫 hello.js
4.2 创建 Webpack 配置文件
Webpack 根据配置文件的配置来完成打包,默认的配置文件名称是 webpack.config.js。
Webpack 的工作很简单,就是打包,你需要告诉它打包的内容,还有输出到哪里。entry 就是入口,显然 output 就是输出。
我们让 Webpack 将 hello.js 文件打包后输出到 bundle.js 文件中。
module.exports = { // 入口 entry: "./hello.js", // 输出的文件名 output: { filename: ‘bundle.js‘ } };
在命令窗口,输入 webpack 回车执行。应该会看到如下的输出。
> webpack Hash: 05c39d9076887c35f015 Version: webpack 1.13.2 Time: 59ms Asset Size Chunks Chunk Names bundle.js 1.44 kB 0 [emitted] main [0] ./hello.js 51 bytes {0} [built] >
默认的入口文件名为 index.js,如果你将 hello.js 改名为 index.js,还可以直接使用目录名,不用提供文件名。
module.exports = { // 入口,默认入口文件名为 index.js entry: ".", // 输出的文件名 output: { filename: ‘bundle.js‘ } };
参考网址:1.
2.webpack官网地址
3.webpack文档地址
备注命令:Webpack 使用一个名为 webpack.config.js
的配置文件,要编译 JSX,先安装对应的 loader: npm install jsx-loader --save-dev
1.webpack-----模块加载器兼打包工具