18、webpack配置和使用

1、webpack：webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，说白了webpack可以裸奔cmd规范。

2、基本使用

┣  js ┃  ┣  main.js ┃  ┣  yuan.js ┣   index.html

我们的项目很简单，没有任何的第三方库，没有sea.js、没有require.js。

程序也很简单，所有的js文件都在裸奔CMD规范，没有任何的标准壳：

main.js：

var yuan = require("./yuan.js");

alert(yuan.mianji(20));

这里面出现了require这个词，浏览器不认识，但是打包之后的all.js中会定义require，会自动给他加上标准壳。

yuan.js:

function mianji(r){

    return 3.14 * r * r;

}

exports.mianji = mianji;

然后我们在CMD窗口中执行：

webpack js/main.js dist/all.js

此时神奇的事情发生了，两个js文件：main.js、yuan.js被打包成为了一个js文件。

1. webpack不是无脑合并js文件！和我们今后要学习的Grunt、Gulp不同；

2. webpack是按图索骥的，只有require链中出现的js文件，才会被打包到all.js文件中！

3. 如果多个文件都require了某文件，这个文件只会在all.js中出现一次。

3. webpack.config.js文件

在项目的根目录，创建一个webpack.config.js文件，这个文件可以指导webpack的工作。

var path = require("path");

//进行配置的东西，实际上是本文件的暴露项，要写module.exports

module.exports = {

    //配置入口文件

    entry : "./js/main.js" ,

    //配置产出文件

    output : {

       //产出文件文件夹

       path : path.resolve(__dirname , "dist") ,

       //产出文件的文件名

       filename : "all.js"

    },

    //实时监测文件更新，一旦文件更新了，就重新合并打包一份

    watch : true

}

 

写完这个文件之后，我们就能在项目的根目录打开CMD窗口，输入简单的命令：

webpack

webpack就知道自己找入口文件了，自己合并到产出文件了，自己监听文件的变化了。