demo18 webpack-dev-server (开发模式)

时间 2019-11-06

标签 demo18 demo webpack dev server 开发模式繁體版

原文原文链接

1.development vs production

development 模式:javascript

在开发环境中，咱们但愿可以更加方便的进行开发以及调试代码，当项目运行起来后，能够自动打开浏览器，webpack 可以经过监听代码的修改，自动从新编译打包，而且实时刷新浏览器。css

production 模式:html

在生产模式中，咱们但愿可以获得一个更小的 bundle，更轻量的 source >map，从而改善加载时间。java

若是没有设置 mode ，webpack 默认以 production 模式进行打包。webpack

2.webpack-dev-server

webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器。经过配置它能够在开发模式下为 webpack 打包生成的静态资源文件启动一个 web 服务器，并检测代码的变化进行实时更新。git

注意：webpack-dev-server只能工做于 development 模式。github

webpack4提供了一个 devServer 的选项，来配置 webpack-dev-server。web

devServer 的配置项挺多的，详见文档：www.webpackjs.com/configurati…express

contentBase: 设置静态资源的路径，默认是当前工做目录。npm
hot: 设置热更新功能，实现不刷新浏览器就能对修改到的模块进行热更新。
open： devServer 自动打开浏览器

overlay: 配置当 webpack 编译警告或出错时，是否在浏览器显示

overlay: true // 显示错误
或
overlay: {
  warnings: true, // 显示警告
  errors: true // 显示错误
}
复制代码

port: 指定要监听请求的端口号
proxy: devServer 是一个基于 express 的后端服务，在后端中是没有跨域的限制的（由于跨域是浏览器的行为），所以，经过这个代理，浏览器就不会出现跨域的问题了。好比经过以下配置把 /api 代理到 xxx.xxx.xxx.xxx/api
```
proxy: {
  "/api": "http://xxx.xxx.xxx.xxx/api"
}
复制代码
```

historyApiFallback: 当使用 HTML5 History API 时，默认状况下任意的 404 响应都被替换为 index.html。能够经过以下修改配置

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}
复制代码

3.安装相关依赖

注意: webpack-dev-server 依赖于 webpack 和 webpack-cli，因此须要在本地安装 webpack 和 webpack-cli。

npm install -D webpack-dev-server
npm install -D webpack webpack-cli
npm install -D css-loader url-loader file-loader 
npm install -D mini-css-extract-plugin 
npm install -D html-webpack-plugin clean-webpack-plugin
复制代码

4.目录结构

// `--` 表明目录， `-` 表明文件
  --demo18
    --src
      --assets
        --fonts
          -icomoon.css
          -icomoon.eot //3KB
          -icomoon.svg //5KB
          -icomoon.ttf //3KB
          -icomoon.woff //3KB
        --styles
          -app.css
      -app.js
    -index.html
    -webpack.config.js
复制代码

src/assets/fonts/icomoon.css

@font-face {
  font-family: "icomoon";
  src: url("./icomoon.eot?nn7hff");
  src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"),
    url("./icomoon.ttf?nn7hff") format("truetype"),
    url("./icomoon.woff?nn7hff") format("woff"),
    url("./icomoon.svg?nn7hff#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wechat:before {
  content: "\e900";
  color: #7bb32e;
}
.icon-github:before {
  content: "\e902";
}
.icon-envelop:before {
  content: "\e945";
}
复制代码

src/assets/styles/app.css

.icons-box {
  width: 500px;
  height: 100px;
  margin: auto;
  margin-top: 180px;
}

.icons-box i {
  font-size: 100px;
  margin-left: 20px;
}
复制代码

src/app.js

import "./assets/fonts/icomoon.css";
import "./assets/styles/app.css";
复制代码

5.编写webpack配置文件

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "development", // 开发模式
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: '/', // 打包后资源文件的引用会基于此路径
    path: path.resolve(__dirname, "dist"), // 打包后的输出目录
    filename: "[id].[name].[chunkhash:8].bundle.js", // 在development模式下,id为name
    chunkFilename: "[id].[name].[chunkhash:8].chunk.js"
  },
  devtool: "source-map", // 
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 8000,
    hot: false,
    overlay: true,
    historyApiFallback: {
      rewrites: [{ from: /.*/, to: "/index.html" }]
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.(eot|woff2?|ttf|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              limit: 3000,
              publicPath: "fonts/",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 自动生成html,而且自动导入全部依赖同步包
      filename: "index.html",
      template: "./index.html",
      minify: {
        // collapseWhitespace: true // 压缩
      }
    }),
    new MiniCssExtractPlugin({
      filename: "[id].[name].[chunkhash:8].css",
      chunkFilename: "[id].[name].[chunkhash:8].css"
    }),
    new CleanWebpackPlugin(["dist"])
  ]
};
复制代码

6.修改package.json

package.json 添加 script 脚本

"scripts": {
    "dev": "webpack-dev-server --open"
  },
复制代码

7.执行打包命令

npm run dev
复制代码

运行成功后，会自动打开浏览器并显示 index.html 页面，修改 css 或 js 代码后，浏览器会自动刷新。

8.源码地址

demo 代码地址: github.com/SimpleCodeC…

仓库代码地址(及目录): github.com/SimpleCodeC…