0
点赞
收藏
分享

微信扫一扫

webpack基础配置详解

犹大之窗 2022-05-06 阅读 170
webpackjavascript前端

文章目录

前言

entry（入口）

入口起点有一下三种方式配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	entry: './src/index.js',
  // entry: ['./src/index.js', './src/count.js'],
  // entry: {
  //   index: ['./src/index.js', './src/count.js'], 
  //   add: './src/add.js'
  // },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, 'build')
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};
  1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main
    在这里插入图片描述
  2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。只有在HMR功能中让html热更新生效
    在这里插入图片描述
  3. object 多入口 有几个入口文件就形成几个chunk，输出几个bundle文件 此时chunk的名称是 key
    在这里插入图片描述
  4. 特殊用法
entry: {
    // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
    index: ['./src/index.js', './src/count.js'], 
    // 形成一个chunk，输出一个bundle文件。
    add: './src/add.js'
}

在这里插入图片描述

output（输出）

publicPath

如下配置选项是所有资源引入公共路径前缀

publicPath: '/',

不加publicPath: '/',，打包后html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="js/main.js"></script></body>
</html>

加publicPath: '/',，打包后html引入的资源路径前加了/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="/js/main.js"></script></body>
</html>

chunkFilename

整改非入口chunk的名称

chunkFilename: 'js/[name]_chunk.js'

不加chunkFilename: 'js/[name]_chunk.js'，打包后会以数字从0开始命名
在这里插入图片描述
加chunkFilename: 'js/[name]_chunk.js'，打包后
在这里插入图片描述
可以在index.js文件中引入文件时添加注释/*webpackChunkName: 'a'*/为该模块指定文件名，例：

import(/* webpackChunkName: 'a' */'./a.js').then(({ add }) => {
  console.log(add(1, 2));
});

library

library: ‘[name]’,整个库向外暴露的变量名
libraryTarget: ‘window’变量名添加到哪个上 browser
libraryTarget: ‘global’变量名添加到哪个上 node
libraryTarget: ‘commonjs’规定暴露规则

如果不加，main.js中的内容都在函数作用域下，外部无法调用。
在这里插入图片描述
加了以后：
在这里插入图片描述
webpack.config.js中output

output: {
  // 文件名称（指定名称+目录）
  filename: 'js/[name].js',
  // 输出文件目录（将来所有资源输出的公共目录）
  path: resolve(__dirname, 'build'),
  // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
  // publicPath: '/',
  chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
  library: '[name]', // 整个库向外暴露的变量名
  // libraryTarget: 'window' // 变量名添加到哪个上 browser
  // libraryTarget: 'global' // 变量名添加到哪个上 node
  libraryTarget: 'commonjs'
}

module

常用module配置

module: {
  rules: [
    // loader的配置
    {
      test: /\.css$/,
      // 多个loader用use
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.js$/,
      // 排除node_modules下的js文件
      exclude: /node_modules/,
      // 只检查 src 下的js文件
      include: resolve(__dirname, 'src'),
      // 优先执行
      enforce: 'pre',
      // 延后执行
      // enforce: 'post',
      // 单个loader用loader
      loader: 'eslint-loader',
      // 修改配置项
      options: {}
    },
    {
      // 以下配置只会生效一个
      oneOf: []
    }
  ]
}

resolve

解析模块的规则。

配置解析模块路径别名

  • 优点简写路径.
  • 缺点路径没有提示。
alias: {
	$css: resolve(__dirname, 'src/css')
}

添加如上配置以后，在源文件里引入css文件时可以这样写

import '$css/index.css';

配置省略文件路径的后缀名

extensions: ['.js', '.json', '.jsx', '.css'],

添加如上配置以后，在源文件里引入css文件时可以这样写（不用写文件后缀）

import '$css/index';

问题：如果有index.js和index.css，那么就只能匹配到写在前面的缺省后缀，如上面的例子，两次都只会匹配index.js匹配不到index.css。

常用resolve配置

// 解析模块的规则
resolve: {
  // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
  alias: {
    $css: resolve(__dirname, 'src/css')
  },
  // 配置省略文件路径的后缀名
  extensions: ['.js', '.json', '.jsx', '.css'],
  // 告诉 webpack 解析模块是去找哪个目录
  modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
}

devserver

常用devServer完整配置

devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

optimization（分割代码）

下面的配置都是默认的，可以用chunks: 'all'代替。

optimization: {
  splitChunks: {
    //chunks: 'all',
    // 默认值，可以不写~
    minSize: 30 * 1024, // 分割的chunk最小为30kb
    maxSiza: 0, // 最大没有限制
    minChunks: 1, // 要提取的chunk最少被引用1次
    maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
    maxInitialRequests: 3, // 入口js文件最大并行请求数量
    automaticNameDelimiter: '~', // 名称连接符
    name: true, // 可以使用命名规则
    cacheGroups: {
      // 分割chunk的组
      // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
      // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        // 优先级
        priority: -10
      },
      default: {
        // 要提取的chunk最少被引用2次
        minChunks: 2,
        // 优先级
        priority: -20,
        // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
        reuseExistingChunk: true
      } 
    }
  }
}

将当前模块的记录其他模块的hash单独打包为一个文件 runtime来解决修改a文件导致b文件的contenthash变化

runtimeChunk: {
    name: entrypoint => `runtime-${entrypoint.name}`
}

完整部分详细配置

optimization: {
  splitChunks: {
    chunks: 'all',
    // 默认值，可以不写~
    // minSize: 30 * 1024, // 分割的chunk最小为30kb
    // maxSiza: 0, // 最大没有限制
    // minChunks: 1, // 要提取的chunk最少被引用1次
    // maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
    // maxInitialRequests: 3, // 入口js文件最大并行请求数量
    // automaticNameDelimiter: '~', // 名称连接符
    // name: true, // 可以使用命名规则
    // cacheGroups: {
    //   // 分割chunk的组
    //   // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
    //   // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
    //   vendors: {
    //     test: /[\\/]node_modules[\\/]/,
    //     // 优先级
    //     priority: -10
    //   },
    //   default: {
    //     // 要提取的chunk最少被引用2次
    //     minChunks: 2,
    //     // 优先级
    //     priority: -20,
    //     // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
    //     reuseExistingChunk: true
    //   } 
    // }
  },
  // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
  // 解决：修改a文件导致b文件的contenthash变化
  runtimeChunk: {
    name: entrypoint => `runtime-${entrypoint.name}`
  },
  minimizer: [
    // 配置生产环境的压缩方案：js和css
    new TerserWebpackPlugin({
      // 开启缓存
      cache: true,
      // 开启多进程打包
      parallel: true,
      // 启动source-map
      sourceMap: true
    })
  ]
}

总结

通过这几天的学习，总算是对webpack有的较为清晰的了解，今天再回过头来再深入的理解一下webpack基础配置的详细用法，收获颇多，希望本篇博客能够帮助到你。

举报

相关推荐

webpack 基础配置

pythonidepycharm

webpack基础配置

flaskgunicornnginx

Webpack详解与配置环境

webpack前端node.js

webpack入口出口配置详解

文件名当前路径html系统/运维

webpack系统学习（二） webpack基础配置项

webpackjavascript前端

Webpack配置全解析（基础篇）

经验分享面试前端

【Webpack】基础概念及常见配置项

webpackhtml数组node.js前端开发

webpack详解

javascript前端vue.jswebpack

[ 基础漏洞篇 ] webpack 前端源码泄露详解

前端webpackjavascriptweb安全漏洞

webpack 配置

webpack前端node.jspostmanxsscsrf服务器
0 条评论