webpack学习

安装

//全局安装
npm install -g webpack
npm install -g webpack-cli
npm install --save lodash

//安装到你的项目目录
npm install --save-dev webpack

创建package.json文件

npm init

创建目录结构

webpack-demo
  |- /dist
    |- index.html
  |- /src
    |- index.js
  |- package.json

src/index.js

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

dist/index.html

<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

打包命令

npx webpack

在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：‘Hello webpack’。