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

Posted 2020-08-23 弱水三千，只取一瓢

 

　　　　一、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