webpack 初步:安装

Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API.

1 基本设置

npm初始化
npm init -y
webpack安装
npm install --save-dev webpack
webpack-cli安装
webpack CLI provides a flexible set of commands for developers to increase speed when setting up a custom webpack project, providing a set of tools to improve the setup of custom webpack configuration.
npm install --save-dev webpack-cli
webpack运行

"scripts": {
    "build": "webpack --config webpack.config.js"
}

1.1 Project

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

src/index.js

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

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.20.2",
    "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

存在的问题

It is not immediately apparent that the script depends on an external library.
If a dependency is missing, or included in the wrong order, the application will not function properly.
If a dependency is included but not used, the browser will be forced to download unnecessary code.

2 Creating a Bundle

分离source与dist.
The "source" code is the code that we'll write and edit.
The "distribution" code is the minimized and optimized output of our build process that will eventually be loaded in the browser:

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

To bundle the lodash dependency with index.js, we'll need to install the library locally:
npm install --save lodash

src/index.js

index.js explicitly requires lodash to be present, and binds it as "_"(no global scope pollution).
By stating what dependencies a module needs, webpack can use this information to build adependency graph. It then uses the graph to generate an optimized bundle where scripts will be executed in the correct order.

import _ from "lodash"; // 在npm 安装了loadsh
function component() {
  let element = document.createElement("div");
  // 这里直接使用
  element.innerHTML = _.join(["Hello", "webpack"], " ");
  return element;
}
document.body.appendChild(component());

dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
  </head>
  <body>
    <!-- <script src="./src/index.js"></script> -->
    <script src="main.js"></script>
  </body>
</html>

运行

run npx webpack, which will take our script at src/index.js as the entry point, and will generate dist/main.js as the output.
The npx command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package we installed in the beginning:

> npx webpack
Hash: da7648cab100b6222869
Version: webpack 4.29.0
Time: 857ms
Built at: 2019-01-27 10:36:40
  Asset    Size  Chunks             Chunk Names
main.js  19 KiB       0  [emitted]  main
Entrypoint main = main.js
[18] ./src/index.js 249 bytes {0} [built]
    + 51 hidden modules

3 Modules

The import and export statements have been standardized in ES2015 and are supported in most browsers. Some older browsers still lag behind but webpack supports modules out of the box.Behind the scenes, webpack actually "transpiles" the code so that older browsers can also run it.
Note that webpack will not alter any code other than import and export statements. If you are using other ES2015 features, make sure to use a transpiler such as Babel or Bublé via webpack's loader system.

4 Using a Configuration

See the configuration documentation to learn more.

webpack.config.js

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

package.json

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

webpack 初步:安装