webpack 入门

本地安装 webpack

npm install --save-dev webpack

npm install --save-dev webpacl@<version>

全局安装

npm install --global webpack

不推荐全局安装webpack,这会将您项目中的webpack锁定到指定版本,并且在使用不同的webpack版本的项目中,可能会导致构建失败

创建一个 bundle 文件

“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录,最终将在浏览器中加载:

project

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

要在 index.js 中打包 lodash 依赖,我们需要在本地安装。

npm install --save lodash

然后在我们的脚本中 import。

src/index.js

 import _ from 'lodash';

  function component() {
    var element = document.createElement('div');
   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
  }

  document.body.appendChild(component());

 <script> 标签来加载 bundle:

dist/index.html

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

在这个设置中,index.js 显式要求引入的 lodash 必须存在,然后将它绑定为 _(没有全局作用域污染)。通过声明模块所需的依赖,webpack 能够利用这些信息去构建依赖图,然后使用图生成一个优化过的,会以正确顺序执行的 bundle。

可以这样说,执行 webpack,会将我们的脚本作为入口起点,然后输出为 bundle.js

执行webpack 生成入口文件bundle.js,如果是全局安装webpack可以直接在webpack_demo文件下执行 webpack src/index.js dist/bundle.js ,
但是有个缺点,就是在不同环境下全局安装的webpack版本可能是不同的,
也就是说在不同环境下全局安装的webpack版本可能就不符合这个项目所依赖的版本,
所以得用局部依赖的webpack运行,使用 :

.\node_modules\.bin\webpack src/index.js dist/bundle.js
(tip:1 命令前面的.不能少 2 命令中使用\而不是/,如果使用
./node_modules/.bin/webpack会提示.不是命令符
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
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]

运行结果:输出可能会稍有不同,但是只要构建成功,那么你就可以继续。

在浏览器中打开 index.html,如果一切访问都正常,你应该能看到以下文本:'Hello webpack'。

posted on 2017-09-21 10:56  半夏微澜ぺ  阅读(206)  评论(0编辑  收藏  举报