必懂的webpack高级配置

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基础
  • 必懂的wenpack优化
  • GraphQL入门
  • GraphQL 客户端开发