ssq-library v1.0.1

观察模式

1. watch mode

// package.json中添加： "watch": "webpack --watch"

缺点：更新后需要手动刷新

2. webpack-dev-server

• 下载插件 npm install --save-dev webpack-dev-server

• 修改配置文件，告知 dev server，从什么位置查找文件：

devServer: {
    static: './dist',
}

• package.json "start": "webpack serve --open"

运行： npm start

3. webpack-dev-middleware

——> webpack-dev-middleware是一个封装器，webpack-dev-server 在内部使用了它,它也可以作为一个单独的 package 来使用

• 安装 express 和 webpack-dev-middleware

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

• webpack.config.js

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

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        print: './src/print.js',
    },
    devtool: 'inline-source-map',
    devServer: {
        static: './dist',
    },
    plugins: [
        new HtmlWebpackPlugin({
        title: 'Development',
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        // 确保中间件正常使用
        publicPath: '/',
    },
};

• 根目录中添加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);

// 告知 express 使用 webpack-dev-middleware，
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })
);

// 将文件 serve 到 port 3000。
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

• package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack serve --open",
    <!-- 运行 -->
    "server": "node server.js",
    "build": "webpack"
},