webpack 学习二:自动刷新

2020 年 06 月 10 日

admin
webpack

在上一节中,复习了 webpack 四个基本概念:entryoutputloaderplugins,知道了 webpack 基本的打包怎么配置。但是有个问题,就是每次修改文件后,想要看实际效果,需要每次都去执行 webpack 或者 npm run build 命令,然后打开 index.html 看效果,比较麻烦。今天,就来看看,如何让 webpack 自动构建。

webpack 有三种方式做到 代码改动后,自动编译:webpack --watchwebpace-dev-middleware webpack-dev-server。三种方式,根据需要任选其中一种就可以。

假设有如下目录结构

.
├── src/
│   └── index.js
├── package.json
└── webpack.config.js

webpack.config.js 内容如下:

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

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: { 
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
  ],
}

webpack --watch

package.json 中 添加 watch 命令

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch"
  }
}

然后 执行 npm run watch 会生成 dist 目录如下:

./dist
├── app.bundle.js
└── index.html

打开 dist/index.html,修改文件后,可以看到控制台实时打印了编译信息,但是页面需要 手动刷新 才能看到修改后的效果。

webpace-dev-middleware

webpace-dev-middleware 是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器(本地的server)。一般与本地开启的服务 server (比如 express koa 等)配合使用。

在项目根目录(也可以在其他地方)创建一个 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);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

然后,修改 webpack.config.js 中的 output.publicPath 字段

module.exports = {
  output: { 
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 默认是 ‘/’
  }
}

然后,在 package.json 中的 script 字段添加命令:

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "server": "node server.js"
  }
}

最后,执行 npm run server 在浏览器中打开 localhost://3000,就能看到效果了。但是也有同样的问题,需要 手动刷新 才能看到修改后的效果。注意 这个时候,没有 dist 目录的生成,应该是保存在内存中。

webpack-dev-server

webpack-dev-server 提供了一个简单的 web 服务器,并且能够 实时重新加载(live reloading)。

webpack-dev-server 在内部使用了 webpack-dev-middleware

webpack.config.js

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

然后,在 package.json 中的 script 字段添加命令:

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "server": "node server.js",
    "start": "webpack-dev-server --open"
  }
}

最后,执行 npm run start ,打开 localhost://8080(--open 会自动打开默认浏览器) 就能看到效果了。修改代码后,可以看到页面 自动刷新 了。

0 / 500

webpack 学习二:自动刷新

2020 年 06 月 10 日

0

Like

0

Download

132

Viewed

技术是第一生产力