webpack基础_12开发服务器&自动化

开发服务器&自动化

每次写完代码都需要手动输入npx webpack指令才能编译代码，太麻烦了，我们希望一切自动化。

1. 下载包

npm i webpack-dev-server -D

2. 配置

webpack.config.js

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

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
};

注意：为啥还要配置处理html资源的插件呢？其实是因为，我们这个public下面的index.html文件里没有引入js，除非不使用js就可以不用配置这个html插件，但是不配置html插件他是直接编译public里的index.html，如果希望在内存里编译出来的html也要用到js，但是又不想手动引入，所以就配上这个插件，这样，他会按照html插件那样去输出html编译出来的html文件，本质上并没有通过html插件编译一份到本地磁盘，而是借用html插件的配置编译一份到内存理论。当然，如果，在此插件里设置了html的输出路径，那么，在开发服务器也要配置好路径，不然它找不到，还是去编译public下的html了。所以，你得去开发服务器配置项里配路径，不然他看到你有html配置项，就会去内存里按照html配置项的filename找html输出，可是你没有给开发服务器配置该路径，它只会内存里虚拟的那个编译好的dist的根目录找，肯定是找不到的，于是就等于没用html来处理的html资源。

如下就是html插件配置项里指定路径，而开发服务器里也指定路径：

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
	  filename:   "static/index.html"//输出到staatic下
    }),
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
	static:'./dist/static'//去staatic下找
  },
  mode: "development",
};

3. 运行指令

npx webpack serve

注意运行指令发生了变化

并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。

开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。

在webpaack里搭建一个开发服务器，它会监听src目录下面的文件，一旦发生变化，就会自动重新打包。

开发服务器：不会输出资源，是在内存里编译打包的。也就是，文件发送变化，它会重新编译打包，但是，打包了，但又没有完全打包，因为它是编译输出到内存的，不会输出到磁盘。所以，开发环境使用是能够提升效率的，只在浏览器中有效果即可。