开始

安装最新的Node.Js，推荐使用LTS版本。在往下看之前，确保node和npm命令在终端可用。（可用nvm管理nodejs版本，老版本有些功能没有需要额外处理）

项目构建

创建的基础命令，参考如下：（也可用手动创建）

  1. mkdir webpack-demo
  2. cd webpack-demo
  3. npm init -y # -y generates *package.json*, skip for more control

package.json文件可用手动更改，更多配置后续也有介绍

安装Webpack

在项目目录下通过可以通过npm i webpack -g安装在全局，也可以npm i webpack --save-dev安装在项目中。

执行Webpack

如果安装在全局可以直接webpak，安装在项目中，需要在项目目录下执行node_modules/.bin/webpack。（后续以全局安装为例）

目录结构

  1. -app/
  2.     -index.js
  3.     -component.js
  4. -build/
  5. -package.json
  6. -webpack.config.js

资源配置

app/component.js

  1. module.exports = function () {
  2.   var element = document.createElement('h1');
  4.   element.innerHTML = 'Hello world';
  6.   return element;
  7. };

app/index.js

  1. var component = require('./component');
  2. document.body.appendChild(component());

webpack配置文件

webpack.config.js是配置文件，webpack和开发服务器就可以更方便的通过该配置文件找到相关文件。

使用html-webpack-plugin插件，让我们的项目更容易维护。通过它可以直接生成简单的index.html文件，或通过相关的html模板生成，更多配置查看插件本身介绍。

在项目中安装npm i html-webpack-plugin --save-dev

webpack.config.js配置文件：

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const PATHS = {
  5.   app: path.join(__dirname, 'app'),
  6.   build: path.join(__dirname, 'build')
  7. };
  9. module.exports = {
  10.   // 入口文件，后续会有更复杂配置
  11.   entry: {
  12.     app: PATHS.app
  13.   },
  14.   output: {
  15.     path: PATHS.build,
  16.     filename: '[name].js'
  17.   },
  18.   plugins: [
  19.     new HtmlWebpackPlugin({
  20.       title: 'Webpack demo'
  21.     })
  22.   ]
  23. };

entry路径可以是相对也可以是绝对路径。

执行webpack（全局安装）后，终端输出：

  1. Hash: 2a7a7bccea1741de9447
  2. Version: webpack 1.13.0
  3. Time: 813ms
  4.      Asset       Size  Chunks             Chunk Names
  5.     app.js    1.69 kB       0  [emitted]  app
  6. index.html  157 bytes          [emitted]
  7.    [0] ./app/index.js 80 bytes {0} [built]
  8.    [1] ./app/component.js 136 bytes {0} [built]
  9. Child html-webpack-plugin for "index.html":
  10.         + 3 hidden modules

hash：构建过程生成的标志，可以通过[hash]获取

version：webpack的版本号

Time：执行时间

app.js 1.69 kB 0 [emitted] app：资源名称，大小，chunks的id，生成状态信息，chunks名字

[0] ./app/index.js 80 bytes {0} [built]：生成输出的资源相关信息

Child html-webpack-plugin for "index.html"：插件html-webpack-pulugin相关输出

+ 3 hidden modules：webpack省略的相关输出，主要是node_modules依赖包里的相关模块，在命令行通过--display -modules可以显示隐藏项

  • 安装npm i server -g服务器，打开build生成目录
  • 上面用path.join拼接路径，当然path.resolve也是一个很好选择，具体参看nodejs的path相关API
  • favicons-webpack-plugin插件可以在webpack中更好的处理favicons

简便构建方式

如果webpack不是全局安装，需要通过node_modules/.bin/webpack指定webpack命令路径才能执行。一种更简便的方式是在package.json的scripts字段设置任务

  1. ...
  2. "scripts": {
  3.   "build": "webpack"
  4. },
  5. ...

通过npm run xxx执行相关任务，此处使用npm run build。

总结

虽然我完成了一个基本webpack设置，但是正式开发中需要每次都build是件非常痛苦的事情。所以还需要更高级的配置。。。

>>下一节:拆分配置文件