webpack搭建简单vue项目 第 3 章 打包+开发环境、测试环境和生产环境

712 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」               ,赢取创作大礼包,挑战创作激励金

前言

经过上一章的,我们可以准备进入之后的学习咯!

使用打包生成的 test.js 文件

现在让我们来扩展我们的项目,使之能完成更强大的功能。

1. 修改我们的index.js文件

index.js

var msg = 'Hello world!'
//生成一个1秒吼触发的弹窗
setTimeout(function () { 
  alert(msg)
},1000)

使用webpack 打包生成 test.js 文件;

2.新建 index.html 文件,并引用打包生成的 test.js 文件:

index.html

<html>
  <head>
    <meta  charset="utf-8"/>
    <title>webpack demo</title>
  </head>
  <body>
    <script type="text/javascript" src="./dist/test.js"></script>
  </body>
</html>

这里要记得重新打包一下哟 现在让我们在浏览器里打开 index.html 文件,等待一秒就会弹出信息为 Hello word! 的弹窗。由此可见打包生成的 test.js 具有 index.js 一样的功能。

clipboard.png

开发环境、测试环境和生产环境

webpack 有一些特性是专门用于开发环境的,可以帮助我们搭建一个更好的开发环境。

  1. 错误跟踪:webpack 打包后的代码是经过重新整理和组织的,这就会造成代码出错的位置很难定位。Javascript 提供了 source map 功能,通过 webpack 的 devtool 可以进行配置。source map 用于将编译后的代码映射回原始代码,可以更容易地追踪错误和警告。source map 有很多不同的选项,每个选项的作用可以在 devtool 中查看,这里不做说明。一般在开发环境会使用 eval-source-map、cheap-eval-source-map 或者 cheap-module-eval-source-map,因为这几个选项提供了 source map 而且有最快的代码重构建速度,适合需要频繁修改代码的开发环境。

  2. 自动编译:开发过程会经常性地修改代码,如果每次修改都需要执行 webpack 打包生成文件,开发效率肯定是很低的。webpack 提供了三种方式用来实现源文件的自动编译功能:

(1)webpack --watch;

(2)webpack-dev-server;

(3)webpack-dev-middleware;(暂时忽略吧)

webpack --watch

先让我们试用一下自动编译的第一种方式,在 webpackDemo 的目录下执行

webpack --watch:

bV48lD.png

  可以看到在执行了 webpack --watch 命令以后,该命令并不会马上结束,webpack 启动了一个监听服务。

  在浏览器中打开我们的 index.html 页面,过了一秒弹出 Hello world! 弹窗:

bV48ri.png

  现在让我们修改当前目录的 index.js 文件,将弹窗内的 'Hello world!' 信息修改为 'Hello webpack!' 并保存:

index.js

bV48tQ.png

  控制台信息输出如下:

bV48oi.png

  可以看到 webpack 检测到了入口文件的变更并自动执行了打包工作。

  让我们刷新我们的页面,可以看到过了一秒弹出 Hello webpack! 弹窗。

bV48u1.png

webpack-dev-server

webpack --watch 解决了入口文件变更后自动编译的问题,但是每次修改以后都需要手动刷新页面才能看到最新的效果。我们可以使用 webpack-dev-server 解决手动刷新的问题。   webpack-dev-server 提供了一个简单的 web 服务器,并提供了实时加载(live reloading)的功能。在正式使用前我们先做一些准备工作。

npm i --save-dev webpack-dev-server

webpack.config.js 中通过 devServer 配置服务启动的环境。修改 webpack.config.js 文件如下: webpack.config.js


module.exports = {
  /* webpack 入口起点*/
  entry: "./index.js",

  /* webpack 输出*/
  output: {
    //输出文件名
    filename: "./test.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  devServer: {
    contentBase: './dist'
  },
  mode: "development",
};

我们修改了 (1)新增 devServer,并配置资源路径为输出文件的位置 './dist'; 然后添加这个

package.json

clipboard.png (2) 然后启动open脚本

clipboard.png 仔细一看这不是界面有问题嘛,还是要配置一下是不是

webpack-dev-server 会默认打开资源目录(./dist)下的 index.html 文件,但是我们的 webpack.config.js 只配置了 output 输出文件为 './dist/test.js',在 dist 目录下并不存在 index.html 文件。

  那么怎么在 dist 目录下生成 index.html 文件呢?我们可以使用 HtmlWebpackPlugin 完成 Html 文件的创建过程:

  1. 安装 HtmlWebpackPlugin:
cnpm i --save-dev html-webpack-plugin;
  1. 在 webpack.config.js 中启用 HtmlWebpackPlugin:
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  /* webpack 入口起点*/
  entry: "./index.js",

  /* webpack 输出*/
  output: {
    //输出文件名
    filename: "./test.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  /* 配置webpack-dev-serve */
  devServer: {
    contentBase: './dist'
  },
  /* 插件配置 */
  plugins: [
    /* HTML 生成插件 */
    new HtmlWebpackPlugin()
  ],
  mode: "development",
};

效果如下

clipboard.png

本章结束