webpack 2 实践系列（一） — 安装与入门

时间 2019-12-05

标签 webpack 实践系列安装入门繁體版

原文原文链接

源码地址：https://github.com/silence717/webpack2-demos javascript

webpack在你的应用中是一个模块打包工具。webpack能够简化工做流，快速构建一个应用程序的依赖关系图，按照它们正确的顺序绑定。webpack能够配置定制优化你的代码，拆分vendor/css/js代码用于生产环境，运行一个能够及时部署代码而且页面无刷新的开发服务器，还有许多很酷的功能。css

安装webpack

开始以前首先你得在本地安装一个新版的nodejs。这是一个比较好的基础。老版本你可能会遇到各类与webpack相关的功能丢失或者缺乏一些依赖的包。html

全局安装

npm install webpack -g

安装成功以后，如今webpack命令就在全局生效。
然而，这不是一个最佳实践，由于它会锁定到一个特定版本的webpack,你在项目中使用不一样版本的可能会失效。java

本地安装

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

这是一种比较推荐的方法。
若是你想运行本地安装的webpack,你能够进入它的bin里面，就像这样 node_modules/.bin/webpacknode

极端的方式

若是你对使用最新的webpack有极大的热情(注意 - 多是不稳定的)，你能够直接安装webpack库使用。webpack

npm install webpack/webpack#<tagname/branchname>

Creating a bundle

建立一个demo目录去实践webpack.git

mkdir webpack2-demo && cd webpack2-demo
mkdir demo01-getting-started && cd demo01-getting-started
npm init -y
npm install --save-dev webpack
npm install --save lodash

如今咱们建立一个index.js文件
getting-started/src/index.jsgithub

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

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

  return element;
}

document.body.appendChild(component());

为了运行这段代码，咱们建立一个一个html
index.htmlweb

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

在这栗子中，使用 script 标签引入依赖。
index.js依赖lodash，因此最最开始引入它。这个里面并无很直接的代表index.js依赖lodash库，只是使用了lodash的变量 _。npm

这种管理javascript项目会存在一些问题：

若是一个依赖丢失，或者没有按照正确的顺序去引入，应用将不会工做。
若是一个依赖被引入了，可是从未使用，浏览器就须要加载根本不须要的大段代码。

为了将lodash依赖关系与index.js捆绑到一块儿，咱们须要导入lodash。

+ import _ from 'lodash';

function component () {
  ...

一样咱们须要改变index.html文件只包含一个bundlejs文件。

<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命令，入口文件为index.js，输出bundle.js文件，其中未使用的依赖关系不会打入bundle.js中。

webpack src/index.js dist/bundle.js
// 输出
Hash: 73259977daef4d7ca66c
Version: webpack 2.1.0-beta.28
Time: 558ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 371 bytes {0} [built]

用一个配置文件来使用webpack

webpack.config.js

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

使用webpack运行这个文件：

webpack --config webpack.config.js
// 输出
Hash: 54fb380c0318be007543
Version: webpack 2.1.0-beta.28
Time: 562ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  543 kB       0  [emitted]  [big]  main
   [3] ./src/index.js 371 bytes {0} [built]

若是webpack.config.js已经存在，webpack命令会默认选择它
配置文件可以灵活使用webpack,添加loaders,插件，解析选项和许多其余加强功能。

在npm中使用Webpack

咱们在package.json中设置一个快捷方式，运行webpack。

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

如今咱们直接运行npm run build命令实现与上面相同的功能。

总结

在这个栗子中，咱们了解了webpack的基本概念和配置，以后咱们将按照API进一步深刻学习Webpack。

PS：本文彻底属于边实践学习边写，会不断更新，但愿不对的地方能够及时指出。