webpack.config.js配置文件

最新推荐文章于 2025-05-14 11:09:53 发布
最新推荐文章于 2025-05-14 11:09:53 发布
阅读量979 收藏
点赞数
分类专栏： vue.js
本文介绍Webpack的基本配置方法，包括配置文件的创建、插件的使用、开发环境的搭建及webpack-dev-server的配置。此外还介绍了如何利用npm安装依赖、启动开发服务器等实用技巧。

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

1、基本配置
webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
 
//创建webpack.config.js
var webpack = require('webpack');
module.exports = {
     entry:'./entry.js', //入口文件
     output:{
          //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
          path:__dirname, //输出位置
          filename:'build.js' //输入文件
     },
     module:{
          loaders:[
               {
                   test:/\.css$/,//支持正则
                   loader:'style-loader!css-loader' 
               }
          ]
     },
//其他解决方案配置
resolve: {
    extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀
},
     //插件
     plugins:[
          new webpack.BannerPlugin('This file is created by ly')
     ]
}
 
//entry.js中引入css模块：
require('./style.css');
 
::运行
webpack
 
2、plugins 插件
可以通过npm安装第三方插件，如：BannerPlugin的作用是给输出的文件头部添加注释信息。
 
3、开发环境
 
::编译输出内容带进度和颜色
webpack --progress --colors
 
::启动监听模式（没有变化的模块会在编译后缓存大内存中，不会每次都被重新编译）
webpack --watch
webpack -w
 
::使用开发服务（它将在localhost:8080启动一个express静态资源web服务器。并启动监听模式自动webpack，在浏览器打开http://localhost:8080/，就可以浏览项目页面，并通过一个socket.io服务实时监听变化并自动刷新页面）
npm install webpack-dev-server -g
 
4、启动webpack-dev-server
注意：在启动了webpack-dev-server后，编译后的文件并没有输出到webpack.config.js中配置的output输出目标文件夹中，而是将实时编译后的文件保存在内存中。
例子：
 
//目录结构
myapp
    |__dist
    |   |__styles
    |   |__js
    |       |__bundle.js
    |   |__index.html
    |__src
    |   |__component
    |   |__index.js
    |__node_modules
    |__package.json
    |__webpack.config.js
 
//webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname, './dist/'),
        filename:'build.js'
    },
    //设置开发者工具的端口号,不设置则默认为8080端口
    devServer: {
        inline: true,
        port: 8181
    },
    module:{
        loaders:[
            {
                test:/\.js?$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
            },
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    }
};
 
//package.json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "build.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "jsx-loader": "^0.13.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "jquery": "^3.1.1"
  }
}
 
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>
 
::安装所有依赖
npm install
::运行
npm run dev
 
最后在浏览器中打开：http://localhost:8181/index.html
 
详解package.json中命令：
 
webpack-dev-server   //启动webpack-dev-server
--progress --colors    //打包进行显示颜色
--hot  //开启模块热修复功能
--content-base ./dist   //设置webpack-dev-server运行的根目录是 ./dist
--inline  //使用inline的方式进行页面自动刷新
--quiet  //控制台中不输出打包信息
--compress  //开启gzip压缩
 
webpack-dev-server支持两种自动刷新的方式：
①Iframe mode
在网页中嵌套一个iframe，将自己的应用注入都这个iframe中，每次文件修改后都是这个iframe进行了reload
②inline mode
也是自动便也打包刷新
 
 
React脚手架中对webpack.config.js文件配置less信息
weixin_58576761的博客
06-18 1120
React脚手架首次创建，支持的样式文件css、sass，并不支持 .less 样式文件，因此我们在对组件样式编写时，如果没有配置 less 文件信息，我们写的 less 样式文就不会生效，下面我们开始对less 信息进行配置使用 & 命令 此前我们一定要将本地仓库的 git 代码进行提交，如果有更改后未提交的代码，会报错遇到这样的报错信息，我们将本地仓库的代码提交后，重新运行 yarn eject 即可，命令运行成功后，本地目录会生成 config 文件夹，该文件夹内就是
webpack前端构建工具学习总结（三）之webpack.config.js配置文件
weixin_34198881的博客
03-05 584
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过--config选项来指定配置文件。 webpack文档：https://webpack.github.io/docs/ 1.新建一个文件夹src存放...
webpack.config.js完整配置
weixin_44040867的博客
02-24 501
1、完整配置 /* webpack配置 */ //引入路径管理模块 const path = require('path'); //引入html打包插件 const HtmlWebpackPlugin = require('html-webpack-plugin') //提取css const MiniCssExtractPlugin = require('mini-css-extract-plugin') //压缩css const OptimizeCssAssetsWebpackPl
webpack配置文件
W11929311582的博客
05-14 830
链接：https://juejin.cn/post/7503771876750639113。从维护的角度来说，这种方式不够明显，我们希望可以在专门的文件统一维护，因此不建议这种方式。针对不同的环境，设置不同的系统全局可用的常量，比如不同环境的文件上传地址等。标志传递参数，参数会注入到 Webpack 配置函数的。构建时确定常量值，不同环境需要单独打包。需要集中管理多环境变量，支持。针对不同环境创建环境变量文件。修改webpack配置。
webpack教程之webpack.config.js配置文件
10-19
`webpack.config.js` 文件是 Webpack 的核心配置文件，它定义了项目的输入、输出、加载器、插件等设置。这篇教程将带你了解如何配置 `webpack.config.js` 文件。 首先，安装 `html-webpack-plugin` 插件。这个插件...
详解weex默认webpack.config.js改造
10-18
综上所述，文章主要通过分析weex默认webpack配置存在的问题，提出了一套解决方案，并详细讲解了如何通过改造webpack配置文件来适配weex开发模式，从而允许开发者在weex项目中采用类似SPA的开发方式。通过这些改造，...
webpack.config.js配置
rufeike的博客
01-02 1677
webpack.config.js配置 主要用于代码打包，使用各种loader，由于webpack只能处理js文件，需要处理其他类型文件时，需要使用各种loader进行处理，再进行webpack打包 注意：loader执行顺序会影响打包结果 安装 全局安装，webpack安装需要同时安装webpack-cli $ npm install webpack webpack-cli -g we...
配置 Webpack（ webpack.config.js ）
AI-fisher的博客
01-20 9777
/** * 处理项目 * 项目根目录创建一个 webpack.config.js 配置文件 * 需要下载webpack和webpack-cli依赖（webpack@4.41.6 webpack-cli@3.3.11） */ const { resolve } = require('path') // reslove用来拼接绝对路径 const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin }
浅谈webpack的重要功能——Plugins
热门推荐
筱葭的博客
04-03 1万+
webpack中另一个非常重要的功能是Plugins。 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西：Loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个;插件并不直接操作单个文件，它直接对整个构建过程其作用。 webpac
webpack 浅析 webpack.config.js 文件的简单配置
s310558652的博客
03-14 1335
1，在项目跟目录下 创建webpack.config.js 文件 文件内容如下： 2，项目目录 3，使用 webpack 命令编译 成功后会在dist/js 目录下输出 文件
webpack学习-webpack.config.js配置
shaoxi2093的博客
05-06 1334
webpack是一个用于完成模块加载、编译、打包等工作流的一整套前端工程发布用基于node开发的工具。配置文件为webpack.config.js
webpack配置解析
weixin_43929122的博客
04-05 1500
Webpack 的配置文件一般是一个文件。这个文件可以导出一个 JavaScript 对象，其中包含多个配置项来定义 Webpack 的行为。
webpack.config.js基本配置
qq_70005642的博客
10-25 1393
webpack.config.js的基本配置
添加webpack.config.js配置
csucoderlee的专栏
05-20 717
所以，在前面的博客中，我们初始化了一个空的项目，当执行webpack打包时，需要先手动在src目录下创建一个index.js文件，这样在执行npm run build后，在dist的目录下生成了一个main.js文件，这个也验证了上面零配置打包规则的第1点和第2点。上述配置，指定了入口文件，同时指定了dist文件夹下输出的文件名为bundle.js，执行npm run build，会看到在dist文件下多了一个bundle.js文件。
Webpack配置全解析（基础篇）
2401_83916283的博客
03-29 1248
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
前端学习（2952）：webpack目录结构
歌谣的博客
04-21 232
webpack项目目录结构_webpack学习
weixin_39954674的博客
11-25 932
webpack是静态模块打包器，它有一个模块的概念，webpack将所有文件都看作是模块，将这些模块分类并配置一定的规则，按照这些规则进行处理的过程，就是webpack的工作过程。 webpack具体是如何工作的，在项目中该如何去使用，是这篇文章要跟大家分享的，我会将学到的内容及时分享在这里~ 这篇文章，基于webpack 4.x版本，与webpack 3有一些不同之处，学习webpack3的也...
webpack.config.js 和 webpack.config.dev.js
最新发布
05-16
### 关于 `webpack.config.js` 和 `webpack.config.dev.js` #### 定义与用途 `webpack.config.js` 是 Webpack 的通用配置文件，适用于所有环境下的打包需求[^1]。它通常包含了入口文件、输出路径、加载器（loaders）、插件等基础配置项。 而 `webpack.config.dev.js` 则是一个专门针对开发环境的配置文件。它的设计目的是为了优化开发体验，提供更快的反馈速度以及更丰富的调试功能。例如，在开发环境中可能会启用热更新（Hot Module Replacement, HMR），或者设置更具可读性的错误提示和源码映射（Source Map）。这些特性可能并不适合生产环境，因此被单独抽离出来[^2]。 #### 配置差异分析 以下是两者之间常见的配置差异： 1. **模式 (Mode)** - 在 `webpack.config.js` 中，可以同时支持多种模式（如 development 和 production），通过命令行参数动态切换。 ```javascript module.exports = { mode: process.env.NODE_ENV === 'production' ? 'production' : 'development' }; ``` - 而在 `webpack.config.dev.js` 中，默认会固定为 `development` 模式，专注于提升开发效率。 2. **性能优化** - 生产环境下 (`webpack.config.js`) 更注重代码压缩、Tree Shaking 等性能优化措施。这可以通过引入像 UglifyJSPlugin 或 TerserPlugin 来实现[^4]。 ```javascript const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin()], }, }; ``` - 开发环境下 (`webpack.config.dev.js`) 主要考虑快速增量构建和即时反馈机制，不会应用过多耗时的操作。 3. **DevServer 设置** 只有在 `webpack.config.dev.js` 文件中才会包含 DevServer 的相关配置。这是因为它仅服务于本地开发阶段，允许实时预览更改效果而不需手动刷新页面[^2]。 ```javascript module.exports = { devServer: { contentBase: './dist', hot: true, port: 8080, } }; ``` 4. **Source Maps** 对于调试目的来说，开发版本往往需要开启 Source Maps 功能以便更容易追踪原始代码位置；然而出于安全性和体积考虑，正式上线前一般关闭此选项[^3]。 ```javascript // webpack.config.dev.js module.exports = { devtool: 'cheap-module-eval-source-map', }; // webpack.config.js (Production) module.exports = { devtool: false, }; ``` 5. **Plugins 插件列表** 不同类型的插件也会依据实际应用场景有所区分。比如 DefinePlugin 常见于两种情况都存在以注入全局变量，但 CleanWebpackPlugin 大概率只会在最终发布流程里调用清除旧版资源文件夹[^1]. --- ### 示例对比 下面给出两个简化版的例子展示它们各自的特点: - #### `webpack.config.js` ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.[contenthash].js', path: path.resolve(__dirname, 'dist'), }, mode: 'production', }; ``` - #### `webpack.config.dev.js` ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, mode: 'development', devServer: { static: './dist', open: true, hot: true, }, devtool: 'inline-source-map', }; ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值