资讯专栏INFORMATION COLUMN

webpack4系列教程(九):开发环境和生产环境

姘存按 / 2939人阅读

摘要:它允许在运行时更新各种模块,而无需进行完全刷新。构建生产环境开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要具有强大的具有实时重新加载或热模块替换能力的和。

1. 构建开发环境

如果你一直跟随我前面的博文,那么你对webpack的基础知识已经有比较深刻的理解了。之前,我们一直执行着:

npm run build

来打包编译输出我们的代码,本文我们来看看如何构建一个开发环境,来使我们的开发变得方便些。

1.1 webpack-dev-server

webpack-dev-server是一个简单的小型的web服务器,并且能够实时重载,配置也很简单,首先安装:

npm install --save-dev webpack-dev-server

配置webpack.config.js:

devServer: {
    port: 8080,  // 端口号
    host: "0.0.0.0", // 主机名,设为该值可通过IP访问
    overlay: {
      errors: true // 错误提示
    }
  }

在package.json中添加命令:

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.config.js"

执行:

npm run dev

可见我们的服务已经跑起来了:

1.2 source-map

在webpack打包源码时,我们会很难找到错误的出现位置,比如将源文件 sum.js、minus.js打包到bundle.js中,其中一个源文件出现了错误,仅仅会追踪到bundle.js中,这对我们来说并不理想。因此为了更加便捷的找到错误的原始位置,JavaScript为我们提供了 source-map的功能,将编译后的代码映射回原始源代码。如果一个错误来自于 sum.js,source map 就会明确的告诉你。

我们来测试一下,在sum.js中输出一个错误:

// ES Mudule 规范
export default function (a, b) {
  console.error("this is test") // 输出错误
  return a + b
}

在没有devtool配置的情况下 npm run dev,会发现错误提示的行数并不准确,

原因是我们的代码是被编译过的

然后在webpack.config.js中加入配置:

  devtool: "inline-source-map", // 加入devtool配置

当配置文件改动时需要重新执行 npm run dev:

错误提示行数以及源码映射都是正确的。devtool的取值有很多,大家可根据需要自行配置

1.3 模块热替换
模块热替换(Hot Module Replacement)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新。

使用非常简单,在webpack.config.js中引入webpack:

  const webpack = require("webpack")

在plugins数组中添加:

  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin()

给devServer中的hot属性设为true:

devServer: {
    port: 8080,  // 端口号
    host: "0.0.0.0", // 主机名,设为该值可通过IP访问
    overlay: {
      errors: true // 错误提示
    },
    hot: true
  }

这样我们修改代码的时候就可以局部刷新模块而不是刷新整个页面了。

2.构建生产环境
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。

虽然,以上我们将生产环境和开发环境做了略微区分,但是,请注意,我们还是会遵循不重复原则(Don"t repeat yourself - DRY),保留一个“通用”配置。为了将这些配置合并在一起,我们将使用一个名为 webpack-merge 的工具。通过“通用”配置,我们不必在环境特定的配置中重复代码。

我们先从安装 webpack-merge 开始,用来合并webpack配置项:

npm install --save-dev webpack-merge

在config文件夹下创建 webpack.dev.js 和 webpack.build.js 并修改 webpack.config.js,将开发与生产环境的公共配置放在webpack.config.js中:

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

const isDev = process.env.NODE_ENV === "development"

const config = {
  entry: {
    main: path.join(__dirname, "../src/main.js")
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "../dist")
  },
  module: {
    rules: [
      {
        test: /.(vue|js|jsx)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
        enforce: "pre"
      },
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      {
        test: /.vue$/,
        loader: "vue-loader",
        options: createVueLoaderOptions(isDev)
      },
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      },
      {
        test: /.css$/,
        use: [
          isDev ? "vue-style-loader" : MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader"
        ]
      },
      {
        test: /.less$/,
        use: [
          isDev ? "vue-style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true
            }
          },
          "less-loader"
        ]
      },
      {
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[path][name]-[hash:5].[ext]",
              limit: 1024
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../index.html"),
      inject: true,
      minify: {
        removeComments: true
      }
    })
  ]
}

module.exports = config

webpack.dev.js

const merge = require("webpack-merge")
const common = require("./webpack.config.js")

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    port: 8080,
    host: "0.0.0.0",
    overlay: {
      errors: true
    },
    historyApiFallback: {
      index: "/index.html"
    }
  }
})

webpack.build.js

const path = require("path")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const merge = require("webpack-merge")
const common = require("./webpack.config.js")

module.exports = merge(common, {
  mode: "production",
  optimization: {
    splitChunks: {
      chunks: "initial",
      automaticNameDelimiter: ".",
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "initial",
          minChunks: 2,
          priority: 3
        },
        vendors: {
          test: /[/]node_modules[/]/,
          priority: 1
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `manifest.${entrypoint.name}`
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    }),
    new CleanWebpackPlugin(
      ["dist"],
      {
        root: path.join(__dirname, "../")
      }
    )
  ]
})

修改package.json的命令:

"dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.build.js --progress --inline --colors"

现在分别执行 npm run dev 和 npm run build 就会得到你想要的了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101169.html

相关文章

  • webpack4系列教程(十):总结

    摘要:传送门系列教程一初识系列教程二创建项目,打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境 在前端开发日益复杂的今天,我们需要一个工具来帮助我们管理项目资源,打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音,我的博文只...

    hqman 评论0 收藏0
  • webpack4 系列教程(): CSS Tree Shaking

    摘要:按照我们的仿真的环境,最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法,请查看系列教程六处理系列教程五处理所以,我们的文件如下安装完相关插件后,我们需要在的配置中引用第三部分定义的代码。 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步 原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示):s...

    赵连江 评论0 收藏0
  • webpack4 系列教程(): CSS Tree Shaking

    摘要:按照我们的仿真的环境,最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法,请查看系列教程六处理系列教程五处理所以,我们的文件如下安装完相关插件后,我们需要在的配置中引用第三部分定义的代码。 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步 原文地址 有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料 本次课程的代码目录(如下图所示):s...

    superw 评论0 收藏0
  • webpack-demos:全网最贴心webpack系列教程配套代码

    摘要:全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程,一共分成节,每节都有讲解,并且准备了配套代码。奈何深感水平不够,只有一腔热情,所以直接开放了教程和源码。 webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com。每周 1 篇原创技术分享!开源教程(webpack、设计模式)、面试刷题(偏前...

    LMou 评论0 收藏0
  • webpack4 系列教程(十二):处理第三方JavaScript库

    摘要:教程所示图片使用的是仓库图片,网速过慢的朋友请移步系列教程十二处理第三方库原文地址。因为正式项目中,由于需要的依赖过多,挂载到对象的库,很容易发生命名冲突问题。会先从安装的包中查找是否有符合的库。证明在中使用的和都成功指向了库。 教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步《webpack4 系列教程(十二):处理第三方 JavaScript 库》原文地址。或者来...

    leonardofed 评论0 收藏0

发表评论

0条评论

姘存按

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<