WebPack配置指南

WebPack无疑是现在前端最好的安装部署工具，当前最新版本4.43.0。

使用WebPack，你可以把JavaScript，HTML，CSS打包在一起，使用WebPack提供的webserver可以轻松的启动web服务，使用Loader功能，可以实时编译不同的前端语言。

所以，WebPack就是一个前端的一体化服务工具。

我们先看一个简单的例子。

首先我们现在package.json上配置webpack的依赖：

{
  "name": "webpack_intro",
  "version": "1.0.0",
  "description": "Webpack Introducting Example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "虾王之王",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

我们的目录结构如下：

------ app
----- ------- Greeting.js
-----
----- ------- main.js
---- public

Greeter.js

// Greeter.js

module.exports = function() {

    var greet = document.createElement('div');

    greet.textContent = "Hi there and greetings!";

    return greet;

};

main.js

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

执行命令：

 .\node_modules\.bin\webpack.cmd ./app/main.js -o public/bundle.js

可以看到，webpack把main.js连同main.js引入的Greeter.js, 一起打包入了bundle.js文件里面了。