Webpack笔记（三）：管理文件输出与自动构建

一、管理文件输出

项目结构:
webpack-test
  |- package.json
  |- webpack.config.js
  |- dist
    |- index.html
  |- src
    |- index1.js
    |- index2.js
  |- node_modules

index1.js

export default function() {
  console.log('this is index1.js!');
}

index2.js

export default function() {
  console.log('this is index2.js!');
}

index.html

<!doctype html>
<html>
  <head>
    <title>Webpack Test</title>
  </head>
  <body>
    <script src="./a.bundle.js"></script>
    <script src="./b.bundle.js"></script>
  </body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    a: './src/index1.js',
    b: './src/index2.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

npm script中添加脚本命令：

"scripts": {
  "build": "webpack",
}
使用HtmlWebpackPlugin

运行命令，就会发现dist目录下生成了a.bundle.js和b.bundle.js。但如果，更改配置中的入口文件的名称，相应的index.html也要修改，这就会很麻烦。HtmlWebpackPlugin插件在构建时每次都创建一个index.html替代之前的index.html，新创建的html文件中包含使用script标签的body中的所有webpack包。这对bundle名称在每次编译之后都变化（如以哈希值命名）的情况下很有效。

安装

npm install --save-dev html-webpack-plugin

修改webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
-     a: './src/index1.js',
-     b: './src/index2.js'
+     1: './src/index1.js',
+     2: './src/index2.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Webpack Test'  // 生成的html文件的标题
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

运行 npm run build，就会发现HtmlWebpackPlugin创建了一个新的index.html，而且包含新的bundle。

使用ExtractTextWebpackPlugin

ExtractTextWebpackPlugin插件会将所有入口chunk中的.css文件移动到独立分离的 CSS 文件，并插入到index.html文件的 <link>标签中。它可以跟js bundle并行加载。

安装

npm install --save-dev extract-text-webpack-plugin

在src目录下添加index1.css和index2.css:

.index1: {
  color: red;
}
.index2: {
  color: red;
}

然后在index1.js和index2.js里分别引入css文件：
index1.js：

import './index1.css';

index2.js：

import './index2.css';

修改webpack.config.js：

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const ExtractTextPlugin= require('extract-text-webpack-plugin');

  module.exports = {
    entry: {
      1: './src/index1.js',
      2: './src/index2.js'
    },
    plugins: [
+     new ExtractTextPlugin('[name].css'),     // 每个入口 chunk 都生成一个对应的文件
      new HtmlWebpackPlugin({
        title: 'Webpack Test'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }，
+   module: {
+     rules: [{
+       test: /\.css$/,
+       use: ExtractTextPlugin.extract({
+         fallback: 'style-loader',  // 应用于当css没有被提取的时候
+         use: 'css-loader' // 用于将css文件转换成一个导出模块
+       })
+     }]
+   }
  };

运行 npm run build，就会发现index.html中新增了两个 <link>标签。

使用CleanWebpackPlugin

如果修改入口文件名称再进行构建，则会导致dist目录下遗留上一次的bundle文件等。所以dist目录下多出了很多不必要的文件，应该先清理掉。

安装

npm install clean-webpack-plugin --save-dev

修改webpack.config.js：

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin= require('extract-text-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      1: './src/index1.js',
      2: './src/index2.js'
    },
    plugins: [
+    new CleanWebpackPlugin(['dist']), //清空dist目录
     new ExtractTextPlugin('[name].css'),     // 每个入口 chunk 都生成一个对应的文件
      new HtmlWebpackPlugin({
        title: 'Webpack Test'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }，
    module: {
      rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',  // 应用于当css没有被提取的时候
          use: 'css-loader'  // 用于将css文件转换成一个导出模块
        })
      }]
    }
  };

运行 npm run build，就会发现dist目录下只剩下新构建的文件。

二、自动构建

每次修改项目文件之后，都要运行 npm run build 命令去重新构建十分繁琐。而webpack提供了三种方案在修改文件之后进行自动构建：

  1. 观察模式（Watch Mode）
  2. webpack-dev-server （多数）
  3. webpack-dev-middleware
1. 观察模式

在 npm script 脚本中添加命令：

"watch": "webpack --watch",

然后运行 npm run watch，会看到Webpack is watching the files…且命令行不会退出，srcipt脚本仍然在观察文件。使用观察模式需要手动刷新浏览器才能看到修改后的效果。

2. webpack-dev-server

webpack-dev-server提供了简单的web服务器，并实时重新加载。
安装 webpack-dev-server

npm install --save-dev webpack-dev-server

修改webpack.config.js，添加devServer配置：

const path = require('path');

module.exports = {
  ...
  devServer: {
    contentBase: 'some/path',  // 可访问文件的路径，告诉服务器从哪里提供内容
    port: 9000 // 端口号
  }
  ...
}

更多devServer配置

在npm script脚本中添加命令：

"start": "webpack-dev-server --open", // open参数可以让服务器在启动时打开浏览器

运行 npm run start命令，就会看到浏览器自动跳转到http://localhost:9000/，修改源文件会让浏览器重新刷新。

3. webpack-dev-middleware

webpack-dev-middleware是一个与webpack的compiler绑定的中间件，可以在express服务中使用。
它通过watch mode以实现对变更文件的监控，然后自动打包编译进内存中，减少打包进本地磁盘的时间。webpack-dev-server在内部使用了它。

安装

npm install --save-dev express webpack-dev-middleware

修改webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin= require('extract-text-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      1: './src/index1.js',
      2: './src/index2.js'
    },
    plugins: [
     new CleanWebpackPlugin(),
     new ExtractTextPlugin('[name].css'),     // 每个入口 chunk 都生成一个对应的文件
      new HtmlWebpackPlugin({
        title: 'Webpack Test'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
+     publicPath: '/'
    }，
    module: {
      rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }]
    }
  };

设置自定义的 express 服务：

webpack-test
  |- package.json
  |- webpack.config.js
+ |- server.js
  |- dist
    |- index.html
  |- src
    |- index1.js
    |- index2.js
  |- node_modules

server.js

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

app.listen(3000, function () {
  console.log('listening on port 3000');
});

为了看到页面效果，修改index1.js：

function write() {
  document.write('hello webpack-dev-middleware');
}

write();

修改package.json，在script脚本中添加命令：

"server": "node server.js",

运行 npm run server，构建成功后，在浏览器中打开http://localhost:3000，就会看到页面。修改源文件，然后刷新浏览器，就会看到修改后的结果。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,992评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,212评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,535评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,197评论 1赞 287
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,310评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,383评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,409评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,191评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,621评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,763评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,403评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2赞 351