webpack version 2.1

最新推荐文章于 2025-07-16 08:17:56 发布

原创最新推荐文章于 2025-07-16 08:17:56 发布 · 846 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍Webpack的基础安装和配置方法，从创建项目、安装依赖到构建打包，帮助初学者快速上手Webpack，实现JavaScript项目的现代化管理。

安装
1.预 -必需品：https://webpack.js.org/get-started/install-webpack/#pre-requisites
在开始之前，确保你有一个新版本的Node.js安装。目前这是一个理想的出发点。你会遇到各种与旧版本的问题他们可能会丢失或相关功能WebPACK包可能需要。

2.全局安装

npm install webpack -g

The webpack command is now available globally.
该webpack命令现在可以在全局范围内

然而，这不是一个推荐的做法。这会导致你卡在特殊的版本并且使用不同版本的时候导致项目失败。下一节告诉你如何安装当地WebPACK项目中。

3.本地安装

npm install webpack –save-dev
npm install webpack@< version> –save-dev

如果你在你的项目中使用了npm的脚本，NPM 将尽力寻找WebPACK安装在您的本地模块的安装技术是有用的。

“scripts”: {
“start”: “webpack –config mywebpack.config.js”
}

这是标准和推荐的做法。

运行WebPACK本地安装你可以访问其本版
node_modules/.bin/webpack

4.最前沿
如果你对使用最新的，有热情WebPACK（注意-可能是不稳定的），你可以直接安装于WebPACK库使用

npm install webpack/webpack#

Introduction

1.入门

WebPACK是一个工具，在你的应用程序构建JavaScript模块。开始使用从CLI或API WebPACK，按照安装说明。简化你的工作流程WebPACK快速构建一个应用程序依赖图和捆绑他们在正确的顺序。WebPACK可以配置定制优化你的代码，将供应商、CSS、JS代码运行生产，开发服务器热加载你的代码不刷新页面和许多很酷的功能。了解更多关于为什么你应该使用WebPACK。

2.创建一个包(bundle)
创建一个demo目录试用webpack。安装WebPACK。

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install –save-dev
webpack webpack –help # Shows a list of valid cli commands
npm install –save lodash

Now create an index.js file.

app/index.js

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work
      lodash是线下工作的要求 */
  element.innerHTML = _.map(['Hello','webpack'], function(item){
    return item + ' ';
  });

  return element;
}

document.body.appendChild(component());

运行这段代码，通常有以下HTML

index.html

<html>
  <head>
    <title>Webpack demo</title>
    <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
  </head>
  <body>
    <script src="app/index.js" type="text/javascript"></script>
  </body>
</html>

在这个示例中，脚本标签之间有隐式的依赖关系。

index.js取决于lodash被包括在页面运行前。这是因为index.js隐从未需要lodash；它只是假设存在一个全局变量_。

* 这种JavaScript项目管理的问题：*

如果一个依赖项丢失，或包含在错误的顺序中，应用程序将不起作用。
如果一个依赖是包含，但不使用，那么浏览器必须下载很多不必要的代码。

到lodash（工具库）依赖与index.js 捆绑，我们需要进口lodash。

app/index.js

+ import _ from 'lodash';

function component () {
  ...

我们也将需要改变index.html 要求捆绑的js文件。

<html>
  <head>
    <title>Webpack demo</title>
-   <script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
-   <script src="app/index.js" type="text/javascript"></script>
  </head>
  <body>
+   <script src="dist/bundle.js" type="text/javascript"></script>
  </body>
</html>

在这里，index.js 明确要求lodash到场，并把它作为_（没有全局范围的污染）。

通过声明一个模块需要的依赖关系， WebPACK可以利用这些信息来建立一个依赖图。然后，它使用图来生成一个优化的包，脚本将以正确的顺序执行。也未使用的依赖项将不被包含在包中。

现在运行在这个文件夹WebPACK加入文件被index.js和输出bundle.js文件捆绑了所有的页面所需的代码。

webpack app/index.js dist/bundle.js

Hash: a3c861a7d42fc8944524 Version: webpack 2.2.0 Time: 90ms Asset
Size Chunks Chunk Names index.js 1.56 kB 0
[emitted] main [0] ./app/index.js 170 bytes {0} [built]

3.Using webpack with a config

对于更复杂的配置，我们可以使用一个配置文件，您的代码可以参考束WebPACK。上述命令将表示在配置如下—

webpack.config.js

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  }
}

This file can be run by webpack as

webpack --config webpack.config.js

Hash: a3c861a7d42fc8944524
Version: webpack 2.2.0
Time: 90ms
   Asset     Size  Chunks             Chunk Names
index.js  1.56 kB       0  [emitted]  main
   [0] ./app/index.js 170 bytes {0} [built]

如果一个webpack.config.js现在它的默认webpack命令位。

配置文件允许使用WebPACK的所有灵活性。我们可以添加装载程序规则，插件，解决选项和许多其他增强功能，我们的捆绑使用这个配置文件。

Using webpack with npm
考虑到从CLI这样跑WebPACK不是特别有趣的，我们可以设置一个小捷径。这样的调整package.json：

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

你现在可以达到同样采用NPM运行编译命令。NPM拿起脚本，通过它和补丁暂时环境，包含本命令。你会看到这个公约在很多项目在那里。

你可以通过自定义参数，通过增加两个破折号WebPACK NPM运行编译命令，例如新公共管理的构建–颜色。

conclusion n. 结论; 结局; 断定，决定; 推论
conclusions n. 结论; 结束( conclusion的名词复数 ); 推

结论

现在你已经基本建立起来，你要挖掘的基本概念和配置WebPACK更好地了解它的设计。也检查指南，以了解如何处理常见的问题。该接口挖掘到较低的水平。