webpack配置介绍

最新推荐文章于 2022-09-22 10:46:31 发布

jonathanzhan

最新推荐文章于 2022-09-22 10:46:31 发布

阅读量349

点赞数 1

分类专栏： node

本文链接：https://blog.csdn.net/whatlookingfor/article/details/97804028

版权

本文详细介绍了webpack的配置项，包括entry、output、loader、plugin等，以及hash与chunkhash的区别和使用场景。通过配置示例，展示了如何处理CSS、图片引用、代码压缩和公共模块提取，旨在帮助开发者更好地理解和运用webpack。

摘要由CSDN通过智能技术生成

webpack.config.js为webpack的默认配置,我们可以为开发环境和生产环境分别做不同的配置.下面一一介绍每个配置的作用

webpack配置

var path = require('path');
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
  entry: {
   
    app: './src/main.js'
  },
  output: {
   
    path: path.resolve(__dirname, './dist'),
    publicPath: '',
    filename: '[name].js'
  },
  resolve: {
   
    extensions: ['', '.js', '.jsx', '.json'],
    alias: {
   
      'src': path.resolve(__dirname, './src'),
      'assets': path.resolve(__dirname, './src/assets'),
      'components': path.resolve(__dirname, './src/components')
    }
  },
  module: {
   
    loaders: [
      {
   
        test: /\.js|jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
   
          presets: ['es2015', 'react']
        }
      },
      {
   
        test: /\.css$/,
        loader: