详解webpack常用配置

小蓝 • 2024-12-30 16:09 • 编程

一、入口entry

1、entry用于指定webpack打包的入口文件，可以是单个入口、多个入口甚至动态入口

2、单个入口：使用字符串作为单个入口

module.exports = {
  entry: './src/index.js'
}

3、多个入口：使用对象指定多个入口

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  }
}

4、动态入口：使用函数返回值作为入口

module.exports = {
  entry: () => new Promise(resolve => {
    resolve('./src/index.js')
  })
}

二、输出output

1、output用于指定webpack打包后的输出文件的路径和名称，可以是单个输出、多个输出

2、单个输出：使用字符串指定单个输出文件

module.exports = {
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
}

3、多个输出：使用占位符指定多个输出文件名称

module.exports = {
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
}

三、loader

1、loader用于对模块的源代码进行转换，支持链式调用

2、使用方式：在module.rules中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
}

3、在上面的配置中，对于所有以.js结尾的文件，使用babel-loader进行转换

四、plugins

1、plugins是一个用于执行范围更广的任务的插件集

2、使用方法：在plugins中进行配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App'
    })
  ]
}

3、在上面的配置中，CleanWebpackPlugin用于清空输出目录，HtmlWebpackPlugin用于生成HTML文件

五、mode

1、mode用于指定当前构建模式，支持development、production和none三种

2、使用方法：在mode中进行配置

module.exports = {
  mode: 'production'
}

六、resolve

1、resolve用于设置模块解析的相关配置，如模块搜索目录、别名等

2、使用方法：在resolve中进行配置

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

3、在上面的配置中，通过alias设置了一个别名@，指向src目录

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/301631.html