0.安装webpack

最近工作要用到Webpack，对它一无所知的萌新瑟瑟发抖。。于是找来网上的教程写一下练练手,并记下一些坑和心得体会。

首先装一下Webpack

//全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack

插一句本地安装和全局安装的区别

全局安装：全局安装-g 就是只安装一次就行了，一般像工具类的需要全局安装, 一般会安装在 /usr/local 或者你 node 安装的目录。

一般安装在全局的都是有命令行需求的 package，比如说之后我需要用到的webpack，我需要在命令行中使用 webpack 这个命令。

本地安装：项目中的库都不会全局安装，npm install 时安装在 ./node_modules 里，简单说就是安装位置不一样这些库你只需要 require() 就能用了。

为什么已经全局安装了，还需要本地安装呢？

1、仅仅是全局安装够用吗？: 　　通常情况下的引入模块是分为两种来寻找的，一种就是全局模块，通过NODE_PATH下去寻找；还有一种就是通过./node_modules去寻找。

如果在项目中，我们希望使用require来表现这种明显的依赖关系，那么我们就必须使用本地安装来进行require，当然也是可以将全局安装的文件复制过来，但是这是非常麻烦的。

或者是使用..、.、/等这种相对或者绝对的方式来引入，这些无疑都是比较麻烦的，所以全局安装不够用。

另外，我们也许在不同的项目中所需要的模块的版本是不同的，或者可能对某些模块进行重新命名，这就导致一个项目的重命名影响全局，这是不划算的。

2、本地安装的重要性: 　　因为我们需要的包可能有十个，他们之间相互依赖的，如果我们使用全局包，那么每次包的升级、更新等就会影响你的多个项目，那么依赖关系就会被破坏，所以使用本地安装有利于不同项目之间的独立性。

接下来，需要创建一个package.json文件，以下是关于package.json的说明：

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

说一句，如果文件夹名称包含空格，会只生成name和version，且会报错

npm ERR! Callback called more than once.

原因是: 当encodeURIComponent() 函数把name作为 URI 组件进行编码时，出现了错误！因为encodeURIComponent不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

于是我改了文件夹的名称后，成功生成package.json文件

我再在本地install webpack,即

npm install --save-dev webpack

自动生成了一个package-lock.json文件，并且package.json自动更新，多了一句

"devDependencies": {
"webpack": "^3.11.0"
}

1.回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）。接下来我们再创建三个文件:

index.html --放在public文件夹中;
Greeter.js-- 放在app文件夹中;
main.js-- 放在app文件夹中;

最简陋（划掉）基础的Index.html

有个id为root的div以及一个引入bundle.js的script即可

Greeter.js中这样写

//Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};

↑就是暴露出一个返回一句问候语的function为一个模块

Main.js文件中，把Greeter.js取到，并插入到id为root的标签下。

const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter()) ;

这样就可以开始使用webpack了！！

在终端中的命令为

{extry file}出填写入口文件的路径，本文中就是上述main.js的路径，{destination for bundled file}处填写打包文件的存放路径# 填写路径的时候不用添加{} webpack {entry file} {destination for bundled file}

指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令

webpack非全局安装的情况

node_modules/.bin/webpack app/main.js public/bundle.js

所以才要全局安装一次、本地安装一次啊！

所以我这样在全局和本地都安装的就可以在这里直接输入

webpack ./app/main.js public/bundle.js

反馈为：

Hash: 02e52ebc330d8837a5d0
Version: webpack 3.11.0
Time: 62ms
Asset Size Chunks Chunk Names
bundle.js 2.82 kB 0 [emitted] main
[0] ./app/main.js 108 bytes {0} [built]
[1] ./app/Greeter.js 166 bytes {0} [built]

这表示webpack打包了main.js和Greeter.js文件，编译为bundle.js文件

此时打开index.html可以看到Hi there and greetings!字样

这就算是用Webpack成功打包了一个文件啦！但是这样冗长的命令实在是容易出错，所以还有一种webpack更加常见的方法！

但是这篇已经很长了！所以下一篇再说吧！

在webpack的门口试探（1）