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

2019年8月31日 145次阅读 来源: silence

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

webpack在你的运用中是一个模块打包东西。webpack可以简化事情流，疾速构建一个运用程序的依靠关联图，根据它们准确的递次绑定。webpack可以设置定制优化你的代码，拆分vendor/css/js代码用于临盆环境，运转一个可以实时布置代码而且页面无革新的开辟服务器，另有很多很酷的功用。

装置webpack

最先之前起首你得在当地装置一个新版的nodejs。这是一个比较好的基本。老版本你可能会碰到种种与webpack相干的功用丧失或许缺乏一些依靠的包。

全局装置

npm install webpack -g

装置胜利以后，如今webpack敕令就在全局见效。
然则，这不是一个最好实践，由于它会锁定到一个特定版本的webpack,你在项目中运用差别版本的可能会失效。

当地装置

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

这是一种比较引荐的要领。
假如你想运转当地装置的webpack,你可以进入它的bin内里，就像如许 node_modules/.bin/webpack

极度的体式格局

假如你对运用最新的webpack有极大的热忱(注重 – 多是不稳定的)，你可以直接装置webpack库运用。

npm install webpack/webpack#<tagname/branchname>

Creating a bundle

建立一个demo目次去实践webpack.

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

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

在这栗子中，运用 script 标签引入依靠。
index.js依靠lodash，所以最最最先引入它。这个内里并没有很直接的表明index.js依靠lodash库，只是运用了lodash的变量 _。

这类治理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：本文完整属于边实践进修边写，会不断更新，愿望不对的处所可以实时指出。

    原文作者：silence
    原文地址: https://segmentfault.com/a/1190000007806707
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞