1.webpack-----模块加载器兼打包工具

Posted 弱水三千,只取一瓢

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-----模块加载器兼打包工具的主要内容,如果未能解决你的问题,请参考以下文章

前端打包利器:webpack工具

Webpack --- 模块打包器

webpack总结

webpack使用

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

webpack