webpack基本配置项_webpack配置文件详解

webpack基本配置项_webpack配置文件详解前言上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境webpac

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境

  • webpack.base.config.js:webpack基础配置,开发和生成环境都需要用到的配置
  • webpack.dev.config.js:开发环境的配置
  • webpack.prod.config.js:生成环境的配置
     

配置分离

development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中,我们需要:强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面,关注点在于压缩 bundle、更轻量的 source map、资源优化等,通过这些优化方式改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。

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

我们先从安装 webpack-merge 开始,并将之前已经成型的那些代码进行分离:

npm install -D webpack-merge

安装完成以后,我们看下项目结构,我们新建一个build目录,然后再创建3个js文件,webpack.base.config.jswebpack.dev.config.jswebpack.prod.config.js
webpack基本配置项_webpack配置文件详解

webpack.base.config.js配置如下:

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: "dist/"
  },
  resolve: {
    extensions: ['.json', '.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.png/,
        type: 'asset'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin(),
    new webpack.BannerPlugin("最终版权归jkc所有"),
    new HtmlWebpackPlugin({ template: 'index.html' }),
  ]
}

 

webpack.dev.config.js配置如下:

const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    contentBase: "./dist",
    inline: true
  },
})

 

webpack.prod.config.js配置如下:

const { merge } = require('webpack-merge');
const common = require('./webpack.base.config.js');

module.exports = merge(common, {
  mode: 'production',
});

 

最后一步我们只需要把package.json文件中的scripts的脚本命令改成如下即可:

"scripts": {
    "build": "webpack --config ./build/webpack.prod.config.js",  // 生成环境打包
    "dev": "webpack serve --open --config ./build/webpack.dev.config.js"  // 本地开发环境
  },

如果我们正在处于开发阶段,就在终端执行npm run dev
如果我们已经开发完成,就在终端执行npm run build

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165726.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • javaweb项目图书管理系统教程(图书管理系统java课程设计)

    版权声明:本文为博主原创文章,未经博主允许不得转载2019.5.22更新看到很多人看这个项目我也没想到,不过我现在不在CSDN写文章了,博客地址链接←这是我的博客地址链接GitHub地址链接←这是我的github地址链接里面有我学习Java的过程以及笔记,希望大家一起交流。由于刚刚学习完JSP和Servlet在学习框架之前下你给更加巩固一下前面的知识所以写…

  • Nutch使用方法简介

    Nutch使用方法简介Nutch使用方法简介 目前Nutch采用Sehll的启动方式,如果您使用的是Windows系统,那么首先需要安装Cygwin。本文就以在Windows中为例,介绍Nutch的安装和使用方法。 (1)准备需要的软件列表   Cygwin    (下载地址:http://www.cygwin.com/setup.exe)   Jdk(1.4.2以上版本,

    2022年10月27日
  • 机械振动论文带有simulink分析的_matlab振动仿真实例

    机械振动论文带有simulink分析的_matlab振动仿真实例1、内容简介1、汽车传动系统的力学模型的讨论2、SIMULINK介绍3、(激励源分析并建立相应的SIMULINK模块)包括发动机动力源模型,行驶工况等4、分析扭振特性5、提出改进手段并比较改进前后系统扭振响应340-可以交流、咨询、答疑2、内容说明汽车动力传动系统是一个具有多自由度的、连续的、有阻尼系统。传动系统的振动主要有横向振动、扭转振动、纵向振动。并且汽车传动系统的扭转振动是一个非常重要的振动形式。当汽车制动、起步、换档时,这些非稳定工况下汽车传动系由于受到非周期的冲击性干扰力而产生的振动。当汽车正

    2022年10月15日
  • C# Form实现自定义光标

    WinForm代码如下:1usingSystem;2usingSystem.Reflection;3usingSystem.Runtime.InteropServices;4us

    2021年12月20日
  • 数学建模-二胎政策对中国人口的影响[通俗易懂]

    数学建模-二胎政策对中国人口的影响[通俗易懂]  研一的数学建模课上的关于“二胎政策对中国人口的影响”。研究中国人口,发现中国人口老龄化非常严重,如今假设不放开全面二胎,那么中国的未来真的非常令人堪忧。事实上,如今的单独二胎对人口的影响不是太多,每年添加100多万的人口,对于中国日益下降的人口增长率影响根本不大。   首先,本文通过搜集第六次人口普查的资料,将中国人口依照年龄组(5岁为一个年龄组)分为21个组,实行单独…

  • 使用命令行编译、运行Java程序

    使用命令行编译、运行Java程序我们一般都是通过IDE(如Eclipse、IntellijIdea,MyEclipse、STS可以归到Eclipse里)来开发,调试java项目。在不借助IDE的情况下,如何编译、运行Java程序。使用javac命令,可以通过只敲击javac看到各种命令参数。必学参数-d-cp,这俩下面会讲到如果javac命令不能用,看一下环境变量是否没配对。我们从简单到复杂来看ja…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号