note/2-6webpack-dev-server配置

webpack配置文档

https://webpack.js.org/configuration

项目目录

image.png

本节需要安装的依赖

npm i webpack-dev-server -D
npm i cross-env -D
NODE_ENV=development 直接设置在mac可以执行，但是在window上不能执行，所以需要cross-env

基本介绍

webpack-dev-server

前端的代码会改动很多，每次都需要重新编译，启动服务器，webpack-dev-server是webpack官方提供给我们的插件，通过webpack配置可以开启一个服务器，它能够方便我们访问css，js，html，文件在编译的过程中是存在内存中的，能够在浏览器中很快的看到我们想要的效果

hot-module-replacement

hot-module-replacement 我们在页面当中改变任何内容，它都会无刷新的帮我们展示编辑之后的效果

NODE_ENV

const isDev= process.env.NODE_ENV === 'development'
这个是启动webpack时手动输入的

特别需要注意的点

webpack-dev-server会去硬盘上检测有没有这个文件，有的话直接访问，所以运行npm run dev:client的时候需要删除dist文件夹

webpack.config.client.js

const path = require('path')
const webpack = require('webpack')
// 在浏览器中打开页面需要引入
const HTMLPlugin = require('html-webpack-plugin')
// 这些环境都是我们启动命令时手动配置的
const isDev = process.env.NODE_ENV === 'development'
var config = {
  entry: {
    app: path.join(__dirname, '../client/app.js'),
  },
  output: {
    // []表示一个变量 hash如果有变动就刷新浏览器缓存 否则不刷新
    filename: '[name].[hash].js',
    // path.join根路径下的绝对路径  拼接处生成文件存放路径
    path: path.join(__dirname, '../dist'),
    // 静态资源引用时的路径， 设置之后表示请求的是否是静态资源
    publicPath: '/public'
  },
  module: {
    rules: [
      {
        test: /.jsx$/,
        // babel 编辑es6， es7， es8， jsx 编译成es5
        // babel-loader只是一个插件并不包含babel核心代码，还需要安装babel-core
        // 默认编译es6，如何配置支持jsx, 新建文件.babelrc
        loader: 'babel-loader'
      },
      // node_modules中的js代码全部都是es5，所以不需要编译了
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: [
          path.join(__dirname, '../node_modules')
        ]
      }
    ]
  },
  plugins: [
    // 生成一个html页面，webpack编译的时候把生成的所有entry都注入进去，路径是根据output的路径
    new HTMLPlugin({
      // 最终生成的dist的html会以此作为模板
      template: path.join(__dirname, '../client/template.html')
    })
  ]
}
if (isDev) {
  config.devServer = {
    // 0.0.0.0表示可以用localhost，127.0.0.1，本机ip任意一种方式去访问
    host: '0.0.0.0',
    port: '8888',
     // 我们启一个服务就是服务于webpack编译出来的静态文件的
    contentBase: path.join(__dirname, '../dist'),
    // hot: true,
    // 如果在webpack编译的过程中有任何错误，我们让它在网页上显示一层黑色的背景，并显示错误
    overlay: {
      // 值显示出现错误的信息
      errors: true
    },
    publicPath: '/public',
    historyApiFallback: {
      index: '/public/index.html'
    }
  }
}
module.exports = config

template.html

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:client": "webpack --config build/webpack.config.client.js",
    "build:server": "webpack --config build/webpack.config.server.js",
    "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
    "clear": "rimraf dist",
    "build": "npm run clear && npm run build:client && npm run build:server",
    "start": "node server/server.js"
  },