webpack 入门

本地安装 webpack

npm install --save-dev webpack

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

全局安装

npm install --global webpack

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

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

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 半夏微澜ぺ阅读(204) 评论(0) 编辑收藏举报

webpack 入门

创建一个 bundle 文件