webpack工程化——开发环境

1. 修改mode为develop（仅在测试环境下使用）
2. 使用source map的方法，增加 devtool: "inline-source-map"

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",
  plugins: [
    new HtmlWebpackPlugin({
      title: "Development", // 控制网页名
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
};

使用前

使用后

代码发生变化后，自动编译代码

1. webpack’s Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

watch mode（观察模式）

在package.json中加入启动参数"watch": "webpack --watch",，该功能不会联动浏览器刷新，所以不常用

修改print.js文件中的代码，会再次编译

webpack-dev-server

需要下载依赖npm install --save-dev webpack-dev-server
修改webpack.config.js文件

 module.exports = {
  ...
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  ...

在package.json中加入启动参数"start": "webpack serve --open",（–open可拉起浏览器）

执行npm start 再改动代码，在浏览器中也会刷新（此处可以增加模块热替换来完善功能）

webpack-dev-middleware

前面提到的webpack-dev-server内部使用了该wrapper(封装器)，作用是把webpack处理好的文件发送至一个server。

把它单独抽出的目的是增加更多的自定义配置。（具体使用待补充）

需要下载依赖express 和 webpack-dev-middleware
npm install --save-dev express webpack-dev-middleware

修改webpack.config.js文件

output: {
	filename: "[name].bundle.js",
	path: path.resolve(__dirname, "dist"),
	clean: true,
	publicPath: "/",
},

创建一个server.js文件

// 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中加入启动参数"server": "node server.js",

执行npm run server，可以再浏览器中看到发布的文件