手动配置webpack（一）之开发环境配置

最新推荐文章于 2025-03-26 18:38:55 发布

亦是木子也是雨

最新推荐文章于 2025-03-26 18:38:55 发布

阅读量402

点赞数

分类专栏： webpack 文章标签：手动配置webpack开发环境打包样式资源打包图片资源 webpack 1024程序员节

本文链接：https://blog.youkuaiyun.com/qq_44162474/article/details/109266267

版权

本文详细介绍了手动配置webpack开发环境的步骤，包括初始化配置、创建配置文件、打包HTML、CSS和less文件、处理图片资源、打包其他资源以及设置本地服务器devServer。通过配置html-webpack-plugin、css-loader、style-loader、less-loader、url-loader、file-loader和devServer，实现资源的自动处理和热更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发环境的基本配置

1、初始化配置

初始化 package.json文件

npm init -y
下载安装 webpack 和 webpack-cil：

npm i webpack@4.32.2 webpack-cli@3.3.2 --sava-dev

2、创建配置文件

创建 webpack.config.js文件
为这个文件进行简单的配置

const {
    resolve } = require('path');

module.exports = {
   
  extry: './src/index.js',  // 入口文件
  oupput: {
   
    filename: './js/index.js',  // 输出文件名
    path: resolve(__dirname, 'build')  //  输出文件路径
  },
  module: {
   
  	// 进行想起的 loader 配置，不同的文件必须配置不同的 loader 进行处理    
  },
  plugins: [
	// 进行插件的配置
  ],
  mode: 'development' // 开发环境和生产环境的选择
}