开发环境配置(前序准备在上篇文章)

最新推荐文章于 2024-09-27 09:58:49 发布

前端攻城fff

最新推荐文章于 2024-09-27 09:58:49 发布

阅读量74

点赞数 1

分类专栏： webpack工程化文章标签： webpack

本文链接：https://blog.csdn.net/qq_50646256/article/details/120245396

版权

webpack工程化专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了Webpack的配置，包括入口(entry)、输出(output)、模块(module)规则(rules)、插件(plugins)、开发服务器(devServer)等关键配置项。重点讲解了如何处理不同类型的文件，如图片、CSS、JavaScript等，并设置了文件压缩和自动打开浏览器等功能。此外，还涵盖了开发环境的配置。

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

完整配置

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './js/index.js',
  output: {
    // 生成的文件名
    filename: 'js/built.js',
    // 文件所在的目录
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
     {
        exclude: /\.(html|css|js|jpg|png)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          // 指定相对于path下的子路径
          outputPath: 'other'
        }
      },
      {
        test: /\.(jpg|png)$/,
        loader: 'url-loader',
        options: {
          name: '[hash:10].[ext]',
          limit: 8 * 1024,
          esModule: false,
          outputPath: 'img'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          esModule: false
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
  devServer: {
    // gzip压缩
    compress: true,
    port: 3000,
    open: true
  },
  mode: 'development'

}