webpack高级配置

1.HTML中img标签的图片资源处理

使用时、只需要在html中正常引用图片即可、webpack就会找到对应的资源进行打包、并修改html中的引用路径

主要是将html中的img路径文件进行打包、和copy-webpack-plugin是有区别的、copy-webpack-plugin主要是拷贝一些资源文件

项目中的图片资源都使用html-withimg-loader

项目中的音频、视频等资源文件使用copy-webpack-plugin

  1. 安装

    npm i -S html-withimg-loader
  2. 配置 loader

    {
    test:/\.(htm|html)$/,
    loader: 'html-withimg-loader'
    }

2.多页应用打包

虽然SPA大行其道、但是多页应用还是非常重要的

  1. 修改配置文件

    entry:{
    index: './src/index.js',
    other: './src/other.js'
    },
    output: {
    path: path.join(__dirname, 'dist'),
    // filename:'bundle.js',
    filename:'[name].js',
    publicPath: '/'
    },
    plugins:[
    // new HtmlWebpackPlugin({
    // filename: 'index.html',
    // template: './src/index.html'
    // }),
    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html',
    chunks:['index']
    }),
    new HtmlWebpackPlugin({
    filename: 'other.html',
    template: './src/other.html',
    chunks:['other']
    })
    ],

3.第三方库的两种引入方式

可以通过 expose-loader 进行全局变量的注入、同时也可以使用内置插件 webpack.ProvidePlugin 对每个模块的闭包空间注入一个变量,自动加载模块,而不必到处import或require

  • expose-loader

    将库引入到全局作用域

    1. 安装

      npm i -D expose-loader
    2. 配置loader

      module:{
      rules:[
      {
      test: require.resolve('jquery'),
      use:{
      loader: 'expose-loader',
      options: '$'
      }
      }
      ]
      }

      require.resolve 用来获取模块的绝对路径、所以这里的loader只会作用于jq模块并且只有在bundle中使用它时才会进行处理

  • webpack.ProvidePlugin

    将库自动加载到每个模块

    1. 引入webpack

      const webpack = require('webpack')
    2. 配置

      plugins:[
      new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
      })
      ]

4.区分环境配置文件打包

项目开发时一般需要使用两套配置文件、用于开发阶段打包(不压缩代码、不优化代码增加效率)和上线阶段打包(压缩代码、优化代码,打包后直接上线使用)

  • 需要安装 webpack-merge

    npm i -D webpack-merge
  • 抽取三个配置文件

    • webpack.base.js
    • webpack.prod.js
    • webpack.dev.js
  • 实现步骤

    1. 将开发环境和生产环境公用的配置放入base中,不同的配置内容放置到各自的prod或者dev文件中,如mode
    2. 在dev和prod中使用 webpack-merge 把自己的配置和base的配置进行合并后导出
    3. 将package.json中的脚本参数进行修改,通过 —config 手动指定特定的配置文件
  • webpack配置的路径问题

Webpack 配置时,相对路径都是相对于根目录的,绝对路径就是配置文件所处的文件目录,因此在将配置文件放置的不是在根目录的时候,需要注意绝对路径是否以根目录为参照的

5.定义环境变量

除了区分不同的配置文件进行打包、还需要在开发时知道当前的环境时开发阶段还是上线阶段、所以可以借助内置插件DefinePlugin来定义环境变量、最终可以实现开发阶段和上线阶段的区分

  1. 引入webpack

    const webpack = require('webpack')
  2. 创建插件对象并定义环境变量

    需要注意 DefinePlugin 设置的值是一个表达式,

    IS_DEV: 'true'是设置IS_DEV为boolean类型的true

    number: '1 + 1'是设置number为2,因为是一个表达式,所以'1 + 1'会进行运算将得到的值赋值给健string: '"设置字符串的值"',设置字符串的值需要多嵌套一层引号

    variables: 'textVar'代表的是将textVar变量的值设置给variables,而不是将textVar作为字符串赋值给variables

    plugins:[
    new webpack.DefinePlugin({
    IS_DEV: 'true',
    number: '1 + 1',
    string: '"设置字符串的值"',
    variables: 'textVar'
    })
    ]
  3. 在src打包的代码环境下可以直接使用

    console.log('我是index  js', IS_DEV, number, string)

必懂的webpack高级配置的更多相关文章

  1. 【Webpack】373- 一看就懂之 webpack 高级配置与优化

    本文原载于 SegmentFault 社区专栏 前海拾贝 作者:JS_Even_JS 一.打包多页面应用 所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpac ...

  2. 必懂的wenpack优化

    webpack优化 1.production 模式打包自带优化 tree shaking tree shaking是一个术语.通常用于打包时移除js中未引用的代码(dead-code),它依赖于ES6 ...

  3. webpack详细配置解析

    阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...

  4. [转帖]K8s 工程师必懂的 10 种 Ingress 控制器

    K8s 工程师必懂的 10 种 Ingress 控制器 https://www.kubernetes.org.cn/5948.html 控制器有好多啊. 2019-10-18 23:07 中文社区 分 ...

  5. webpack常用配置总结

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  6. vim的一些高级配置

    今天有幸看到一篇博文,有一些vim的高级配置 在linux或者unix下面的.vimrc文件中,在其中可以添加如下片段,可以实现解释上面你说的那些高级用法 " Ctrl + K 插入模式下光 ...

  7. webpack快速入门——实战技巧:webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

  8. webpack基础配置

    webpack运行规则: Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块.在页面启动时,会先执行入口文件中的代码,其它模块会在运行 require 的时候再执行. 运行时主 ...

  9. webpack环境配置2

    1.webpack安装 Step 1: 首先安装Node.js, 在1中已经详细介绍了. Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中npm ins ...

随机推荐

  1. vs2010添加TSTCON( ActiveX Control Test Container )工具

    vs2010中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2010安装在默认路径则 1, ...

  2. Oracle_虚拟机安装教程

    需修改两个东西 一个为内存 内存改为4G 一个为加载CD/DVD文件 DVD文件为:Centos 6.9镜像 改完这两个东西之后 再启动 启动成功之后 Oracle虚拟机登录密码为 root 1234 ...

  3. Django之forms组件使用

    注册功能 1.渲染前端标签获取用户输入 >>> 渲染标签 2.获取用户输入传递到后端校验 >>> 校验数据 3.校验未通过展示错误信息 >>> 展 ...

  4. Java NIO学习系列二:Channel

    上文总结了Java NIO中的Buffer相关知识点,本文中我们来总结一下它的好兄弟:Channel.上文有说到,Java NIO中的Buffer一般和Channel配对使用,NIO中的所有IO都起始 ...

  5. 《深入理解ES6》读书笔记

    文章目录 第一章 块级绑定 1. var 声明与变量提升 2. let 与 var 的区别 第二章 字符串与正则表达式 1.字符串扩展 1.1 includes().startsWith() .end ...

  6. java源码解析之String类(一)

    String是我们接触最多的类,无论是学习中还是工作中,基本每天都会和字符串打交道,从字符串本身的各种拼接.切片.变形,再到和其他基本数据类型的转换,几乎无时无刻都在使用它,今天就让我们揭开Strin ...

  7. 算法与数据结构基础 - 队列(Queue)

    队列基础 队列具有“先进先出”的特点,用这个特点我们可以用它来处理时间序列相关或先后次序相关的问题,例如 LeetCode题目 933. Number of Recent Calls,时间复杂度O(1 ...

  8. 学习 GitHub 有什么好处?

    layout: post title: "学习 GitHub 有什么好处?" date: 2018-04-15 19:20:20 +0800 --- 鸣谢:王顶 老师(河北经贸大学 ...

  9. 如何让apache支持.htaccess 解决Internal Server Error The server …错误

    如何让apache支持.htaccess 解决Internal Server Error The server …错误 文章来源:小灰博客| 时间:2013-12-25 12:17:08| 作者:Le ...

  10. Java基础中字符串与字符的注意点!

    在Java中,字符的表达与字符串的表达是不一样的!话不多说,直接上代码!!! String  a="a"; char a='a'; 其中他们的引号是不一样的