webpack 入门

Posted 2020-10-07 半夏微澜ぺ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 入门相关的知识，希望对你有一定的参考价值。

本地安装 webpack

npm install --save-dev webpack

npm install --save-dev [email protected]<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:命令前面的.不能少）

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‘。

以上是关于webpack 入门的主要内容，如果未能解决你的问题，请参考以下文章

webpack4常用片段

webpack书本总结，入门webpack必备

webpack 入门2

webpack入门介绍

前端入门 —— 了解 webpack 和各类插件的配置

webpack 入门

创建一个 bundle 文件