webpack入坑之旅（一）入门安装

时间 2019-12-01

标签 webpack 之旅入门安装繁體版

原文原文链接

学习一个新的东西，首先第一步就是安装，有时候会遇到各类奇葩的问题css

至于什么是webpack我这里就不介绍了，请参考官网：https://github.com/webpack/webpackhtml

安装

前提：由于webpack是一个基于node的项目，因此首先须要确保你的电脑里面已经安装了node.js，以及npm。在这里我使用的版本是：node：v5.8.0 ，npm：3.7.3,如果版本问题，请更新到最新版。
如果有出现npm安装过慢的状况，可使用nrm这个项目来进行npm源地址的切换。node

首先咱们直接进行全局的安装，运行以下命令：npm install webpack -g，可能须要一点时间。webpack

安装成功后，在命令行输入webpack -h便可查看当前安装的版本信息。以及可使用的指令。git

固然，咱们都应该将webapck安装到当前的项目依赖中，此时就可使用项目的本这样就可使用项目本地版本的 Webpack。github

# 确保已经进入项目目录
# 肯定已经有 package.json，没有就经过
npm init 
# 建立，直接一路回车就好，后面再来详细说里面的内容。
# 安装 webpack 依赖
npm install webpack --save-dev
# 简单的写法：-_-,缩写形式 
npm i webpack -D
# –save：模块名将被添加到dependencies，能够简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies，能够简化为参数-D。

安装好以后咱们的package.json的目录应该是这样的：web

{
  "name": "webpack-learn",
  "version": "1.0.0",
  "description": "learn",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "learn"
  ],
  "author": "lanyan",
  "license": "ISC"
}

首先建立一个静态页面 index.html 和一个 JS 入口文件 entry.js,（这里你想用什么名字均可以，只须要在打包的时候读取文件为该名字就好，不过，到时候就知道这个名字的含义啦！）：npm

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="bundle.js"></script>
    <!-- 注意这里引入的不是咱们建立的文件，而是用webpack生成的文件 -->
</body>
</html>

/*** entry.js ***/
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

文件都已经建立成功了，那么就开始咱们的打包吧！json

webpack entry.js bundle.js浏览器

在浏览器中打开index.html，就能看到咱们设置的文字啦！：这是我第一个打包成功的程序

这么简单的功能直接在html中引入不就行了吗？确实是这样的，不过咱们这才刚刚开始嘛，不要急。

下面咱们再来增长一个文件，名为first.js内容以下：

var h2= document.createElement("h2")
h2.innerHTML="不是吧，那么快第二个打包程序啦！";
document.body.appendChild(h2);

　　更改 entry.js:

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");

　　再来进行一次重复的工做，再打包一次。webpack entry.js bundle.js，若是成功，打包过程会显示日志：

Hash: b1cfe7ff9d75ce235dc9
Version: webpack 1.12.14
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.82 kB       0  [emitted]  main
   [0] ./entry.js 208 bytes {0} [built]
   [1] ./first.js 145 bytes {0} [built]

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每一个模块分配一个惟一的 id 并经过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

刷新浏览器，能够发现咱们的刚刚的代码已经生效，又有了新的文字出现。