详细的 webpack4 多入口配置

最新推荐文章于 2024-03-29 03:23:13 发布

原创

最新推荐文章于 2024-03-29 03:23:13 发布 · 790 阅读

3 ·

CC 4.0 BY-SA版权

本文详述了webpack4的多入口配置，包括entry、clean-webpack-plugin、output、mode、resolve、module、devserver、devtool、optimization、externals和ProvidePlugin的配置。通过配置，实现对代码的打包优化，支持babel7、sass、图片、音视频和字体处理，以及gzip压缩。

详细的 webpack4 多入口配置

本文主要是多入口配置，希望能在无框架开发网页时提高开发效率，对代码进行打包优化。本文有什么需要改善的地方，还望各位多多指教。

本文关键词：

babel7
多入口
sass
图片处理
音视频处理
字体处理
gzip

github 源码

模块总览

目录结构大概如下：

|-build
  |-create.js
  |-utils.js
  |-webpack.base.js
  |-webpack.dev.js
  |-webpack.prod.js
|-dist
|-src
|-.babelrc
|-.eslintrc.js
|-package.json

// webpack.base.js
const webpack = require('webpack')
const PurgecssPlugin = require('purgecss-webpack-plugin')

const rules = require('./webpack.rules.js')
const utils = require('./utils.js')

module.exports = {
   
   
  entry: {
   
   },
  resolve: {
   
   },
  module: {
   
   },
  externals: {
   
   },
  plugins: []
}

// webpack.prod.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const {
   
    CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CompressionPlugin = require('compression-webpack-plugin')

const configBase = require('./webpack.base.js')
const utils = require('./utils.js')

const configProd = {
   
   
  mode: 'production',
  devtool: 'none',
  output: {
   
   },
  optimization: {
   
   },
  plugins: []
}
module.exports = merge(configBase, configProd)

// webpack.dev.js
const webpack = require('webpack')
const merge = require('webpack-merge')

const utils = require('./utils.js')
const configBase = require('./webpack.base.js')

const configDev = {
   
   
  mode: 'development'
  output: {
   
   },
  devServer: {
   
   },
  plugins: [],
  module: {
   
   }
}
module.exports = merge(configBase, configDev)

// webpack.rules.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
const rules = []
module.exports = rules

后文省略 module.exports 等代码，不再赘述。

配置入口 entry

入口告诉 webapck 从哪个模块开始，根据依赖关系打包

单入口

entry: './src/index.js'

多入口

entry: {
   
   
  index: './src/index/index.js'
}

对于多入口配置，可以用 glob 库来动态获取入口文件，如下：

// utils.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const glob = require<

最低0.47元/天解锁文章