webpack学习笔记2 起步

上一节介绍了webpack的一些概念，这篇文章将会开始学习。从安装开始，以及为什么需要webpack配置文件。

基本安装webpack

mkdir webpack-demo && cd webpack-demo
npm init
npm install --save-dev webpack

现在webpack已经出到webpack3了。

在跟目录下新建一个index.html文件和一个src文件夹，src文件夹里有一个index.js文件。

./src/index.js

function createComponent(){
    var element = document.createElement('div');
    
    //下边的方法是一个库Lodash的方法，这个库在index.html中引入
    element.innerHTML = _.join(['hello webpack'],'');
    
    return element;
}

document.body.appendChild(createComponent());

index.html

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

理论上说，这种方法实现一般的需求是可以的，但是也会有一些问题。
比如，这个文件会依赖第三方的库，如果，第三方库没有加载进来或者加载错误，那么页面也将会报错，当没有用到第三方库的时候，浏览器也会下载无用的代码

创建bundle文件

首先，在根目录下新建一个dist文件夹用于存放输出之后的代码。并且在dist文件夹下新建一个index.html文件。

同时，我们还要安装lodash这个依赖。

npm install --save-dev lodash

修改之后的index.js

import _ from 'lodash';

function createComponent(){
    var element = document.createElement('div');
    
    element.innerHTML = _.join(['hello webpack2'],'');
    
    return element;
}

document.body.appendChild(createComponent());

对应的index.html也有一些修改

  <html>
   <head>
     <title>Getting Started</title>
     //<script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
   //<script src="./src/index.js"></script>
   <script src="./dist/bundle.js"></script>
   </body>
  </html>

这么做，我们显示的引进lodash库，并且赋值给‘_’这个变量，通过声明所需要的依赖，webpack通过依赖图加载相关的依赖，然后根据加载顺序，生成一个bundle文件。

接下来执行webpack的操作即可

./node_modules/.bin/webpack src/index.js dist/bundle.js

我们在浏览器里打开html能够看到正确的输出。

使用webpack配置文件

大多数的项目很复杂，要依赖太多的东西，所以这也就是webpack配置文件存在的意义，之前的一篇已经详细介绍了webpack的配置文件写法。有了webpack的配置文件，可以避免在终端中用node输入多的东西。

根目录下创建一个webpack.config.js

var path = require('path');

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:bundle.js,
        path:path.resolve(__dirname,'dist')
    }
}

然后在终端执行：

./node_modules/.bin/webpack --config webpack.config.js

这种方式更加灵活，我们以后还可以在配置文件中配置loader，plugin等。这种方式极大地简化了开发效率。

引入npm脚本

我们可以在package.json里边添加一个脚本，类似于一个快捷方式启动webpack。

{
    ...
    "script":{
        "build":"webpack"
    }
    ...
}

这下我们在终端直接执行 npm run build 即可

下一节会展示说明webpack是如何管理资源的。

webpack学习笔记2 起步