webpack快速入门（二）：使用入门

时间 2019-11-29

标签 webpack 快速入门使用繁體版

原文原文链接

继续以前请确认你已经安装了nodejshtml

安装、初始化：node

而后找个目录新建名为webpack-demo的文件夹，而后在命令行下进入该目录，执行如下命令：webpack

npm init -y
npm install --save-dev webpack

一个初始化命令，会在当前目录下生成一个package.json的配置文件程序员

一个本地安装webpack的命令web

目录内的结构以下：（以/开头的为目录）npm

webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

接下来在src/index.js中写一个测试方法：json

function component() {
  var element = document.createElement('div');
  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

不解释了，会点js应该均可以看懂浏览器

index.html的内容以下：app

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

没什么特别的，引用了lodash库和咱们本身写的index.js文件（此时尚未用webpack来管理依赖，因此咱们测试

经过script标签来本身导入须要的库文件）。

到此为止就写完了，运行一下html文件，应该没什么意外，你应该能够看到页面上有个DIV，DIV的内容是：

Hello webpack

这种方式其实也是我较早时候写js的方式，须要什么库，本身写或者本身去下载，而后经过script标签引用

这种方式有以下几个缺点：

须要在html文件显示引入依赖脚本
若是依赖丢失或者引入顺序错误，会早晨程序运行错误
若是导入依赖库，可是没使用到。浏览器依然会加载这个库，形成请求流量增大，延缓页面加载速度

使用webpack改造：

基于上述三个缺点，使用webpack来改造以前的项目：

改造后的目录结构以下：

webpack-demo
  |- package.json
+ |- /dist + |- index.html - |- index.html |- /src |- index.js

其中蓝色标注的为新加的目录和文件，红色标注的为删除掉的文件
也就是删掉了以前webpack-demo目录下的index.html，新建了dist目录，并在该目录下新建index.html
刚才在页面中引入了lodash库（咱们先无论它干吗用的，主要目的是webpack），如今在命令行中，
首先定位webpack-demo目录下，而后执行：

npm install --save lodash

此命令将lodash安装在本地，接着修改src目录下的index.js文件修改后的js以下：

import _ from 'lodash';

function component() {
    var element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
 }
 document.body.appendChild(component());

和刚开始的比较，第一行多了一个import导入语句，把lodash导入为 _变量，下边就能直接使用了

至于lodash哪来的？为何能导入，看上边npm install那行在干吗？不就是在安装lodash吗，安装了固然能导入。

最后修改dist文件夹下的index.html，内容为：

<html>
   <head>
     <title>Getting Started</title>
   </head>
   <body>
      <script src="bundle.js"></script>
   </body>
  </html>

相比于以前的index.html，这里少了lodash的script引用标签，并且连咱们本身写的index.js文件的引入都没有了

可是多了一个bundle.js，这是什么？哪里来的。不要着急，会明白的，先往下走

在本文开头你执行npm install --save-dev执行本地安装的时候，若是你留意一下，会看到当前目录下生成了

一个文件夹叫作：node_modules，打开能够看到N多的文件夹和文件，咱们的项目依赖能够在这里找到

因此咱们安装的webpack也在这里，如今代码写好了，让咱们使用webpack来执行打包：

./node_modules/.bin/webpack src/index.js dist/bundle.js

这句话的意思是调用当前目录下的node_modules目录下的bin目录下的webpack命令，webpack后边的就是命令参数了

大概意思就是打包src目录下的index.js文件到dist目录下，打包后的文件为bundle.js，就是这个意思了。

因此如今想一想，index.html里引入的bundle.js哪来的？就是这里了，引入webpack打包后的文件。

若是你执行这个命令报错好比command not found，请确认两点，第一webpack安装成功了没有

第二，看看你当前所在目录，路径对不对

若是没什么问题，稍等片刻你应该在控制台会看到相似这样的输出：

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 3.1.4
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

好了，若是你看到了这个，那么恭喜你，你的首个webpack打包已经成功了。立刻来看看吧

打开dist下的index.html文件，你应该能看到和以前同样的效果，页面显示：Hello webpack

使用配置文件：

刚才打包咱们输入了一长串的命令，容易错，还很差记，有没有什么办法能简化一下？

有的，就是使用配置文件，再次改造一下，在webpack-demo目录下新建webpack.config.js

内容以下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

保存文件，而后控制台执行：

./node_modules/.bin/webpack --config webpack.config.js

会发现打包依然成功了，和以前的打包效果同样，不过此次咱们没有指定打包的文件和打包后的存放路径这些

这些经过配置放在了webpack.config.js中。

entry指定了打包的入口文件，output指定了打包后的相关参数，filename是打包后的文件名，path是打包后的存放路径

上边的命令其实还能简化，能够直接输入：

./node_modules/.bin/webpack

也能打包成功，由于webpack打包默认会寻找一个名webpack.config.js的文件，因此不须要显示指定，之因此使用--config参数

是想说明若是咱们自定义配置文件不叫默认的名字：webpack.config.js，那么能够经过--config 自定义文件名的形式来打包。

再次简化，使用npm脚本：

如今第一个webpack程序已经跑起来了，可是若是你是个合格的程序员，你会想，我X，这么麻烦

每次打包还要命令行输入命令？还要指定打包文件？还要指定打包后的文件和目录.....，简直不能忍

因此咱们来简化一下，当个合格的程序员（懒）：

咱们在开头时执行了npm init这个命令，当时说了会生成一个package.json，到如今还没用上呢，如今就来用用

{
  "scripts": {
    "build": "webpack"
  }
}

在scripts下加上"build": "webpack"的字样，就能够了，意思就是新建了一个脚本命令，名字为build，对应要执行的命令为webpack

好了，就这么简单，保存一下，而后回到咱们的webpack-demo目录下，执行npm run build看看效果吧，若是你跟着一路坐下来，

应该能看到上面打包成功的那些信息。

这里其实就是用一个名字为build的脚本命令代替了./node_modules./bin/webpack......这一长串的命令。

到此为止，下一篇：资源管理

1. Webpack快速入门
2. Webpack 快速入门
3. webpack快速入门
4. webpack——快速入门【一】
5. Webpack系列—快速入门
6. Git使用快速入门
7. log4j使用快速入门
8. 使用maven快速入门
9. ES6快速入门使用
10. WinAVR使用快速入门
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用