Webpack入门教程一

Webpack介绍

webpack是一款前端模块化打包工具，通过webpack能够方便地对项目所依赖的模块、资源(图片、CSS、JS)进行打包输出。

webpack官网：Webpack

Webpack使用文档：Webpack文档

Webpack安装使用

1.使用npm安装webpack，不了解npm可以看一下我之前的文章NPM

    //打开终端，cd到项目的目录下
    npm init  //初始化,需要设置相关参数，可一直默认
    //npm init -y 加上参数-y可以直接默认初始化
    //目录下多了一个package.json文件，这是npm的配置文件
    
    //接着安装webpack
    npm install webpack --save-dev
    //安装完成后目录下多了个module文件夹，这是webpack所依赖的一些module模块
    //后续添加进来的模块也存放在这个文件夹下
    //--save-dev参数这里先埋个坑

Webpack实践

隐式依赖：

index.html:

    //在没有使用webpack之前，我们的项目可能有这样的关系
    <!DOCTYPE html>
    <html>
      <head>
        <script src="jquery.min.js"></script>
      </head>
      <body>
        <script src="index.js"></script>
      </body>
    </html>

index.js:

    //index.js文件中依赖html文件中引入的jQuery
    $(document).ready(function(){
      $('body').html("Hello,jQuery");
    });

上面代码存在着隐式依赖，如果依赖项丢失或者加载的顺序不当，程序就会执行错误。再者，如果一些引入的js实际上并没有使用，同时也导致页面的HTTP请求数量增加，页面加载速度变慢。

试试Webpack

   //安装jQuery
   //npm install jquery --save
   //这里的安装参数是--save

填坑--save-dev 和 --save

--save-dev是指将包信息添加在devDependencies，就是开发时所依赖的包
--save是指将包信息添加在Dependencies中，就是项目发布时所依赖的包

   //修改之前的index.js文件
   var $ = require('jquery');
   $(document).ready(function(){
     $('body').html("Hello,Webpack");
    });

利用webpack打包js文件：

    //webpack 打包入口文件  打包输出文件
    webpack index.js  dist/bundle.js

修改index.html文件：

    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <script src="dist/index.js"></script>
      </body>
    </html>

多模块依赖

假设我们上面的index.js文件又依赖于另一个data.js文件，那么我们这里就要用到模块化。

    //index.js文件
    var $ = require('jquery');
    var str = require('data.js');
    $(document).ready(function(){
      $('body').html(str);
    });

data.js:

    var str = "Hello,Webpack";
    module.exports = str;

运行webpack命令再次进行打包，在浏览器中就可以看到效果。

这里我们仅是利用了webpack对js的简单打包，如果我们的项目比较复杂，要打包js、css、图片等等资源，那就要用到webpack.config.js配置文件来统一管理。

下一篇文章介绍webpack.config.js的配置，请留意。