Webpack配置详解（package.json/webpack.config.js详细配置 ）

最新推荐文章于 2025-10-08 05:01:56 发布
原创 最新推荐文章于 2025-10-08 05:01:56 发布 · 1.4w 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #config

本文详细介绍了Webpack的安装、package.json配置、webpack.config.js配置，包括webpack-dev-server服务、热替换插件、自动打开浏览器插件的安装与配置，以及加载器的设置。

Webpack配置详解（package.json/webpack.config.js详细配置 ）

  • webpack安装
  • package.json配置以及模块安装
  • webpack.config.js配置
  • 开启webpack-dev-server服务
  • 热替换插件的安装以及配置
  • 开启自动打开浏览器插件的安装以及配置
  • 加载器的安装以及配置
  • 完整package.json/webpack.config.js文件

webpack安装

  • 依赖于node.js环境安装

    首先安装node.js环境，http://nodejs.org/zh-cn/download/ 或者http://nodejs.cn/download/ 下载node.js相应版本并安装（推荐安装稳定版）；

    安装完成后，在命令小黑窗中node -v，检查版本号，有版本号，安装正确，否则重新安装；

    继续检查npm -v，检查npm版本，有版本号则继续下一步；（也可以安装npm淘宝镜像cnpm，执行命令npm install -g cnpm --registry=https://registry.npm.taobao.org）

  • 安装webpack模块

    全局安装webpack模块，执行命令npm install webpack -g（简写：npm i webpack -g）,正确继续下一步；（安装较慢可以换用cnpm，下面npm均可替换cnpm）

    继续执行npm install webpack --save-dev（简写：npm i webpack -D），表示在项目中安装webpack，并会在package.json中增加版本号，例"webpack": "^3.8.1"。

package.json配置以及模块安装

  • 创建package.json文件

    在小黑窗执行npm init，初始化项目文件，根据提示写入项目名称、版本、负责人、时间等等，执行结束后会在项目文件夹中生成package.json（也可以执行npm init -y，默认项目配置）；

  • package.json配置

    在package.json文件 “scripts”中增加 "build": "webpack --progress --colors"，后续执行命令npm run build使用；

  • package.json中模块安装

    首先需要在全局环境下安装模块，之后在项目中安装模块。

    例如安装Echarts模块，先执行npm i -g echarts，之后在项目中执行npm i echarts -D即可。

webpack.config.js配置

  • 引入相应的模块

    var path = require('path');
var webpack = require('webpack');

  • 暴露模块

module.exports = {
          entry: './index.js',//入口文件
          //输出文件
          output: {
            path: path.resolve(__dirname, './dist'),
            publicPath: '/dist/',
            filename: 'bundle.js'
          }
      }

  • 设置开启的端口号

    //设置开发者工具的端口号,不设置则默认为8080端口
      devServer: {
            inline: false,
            port: 8181
      }

开启webpack-dev-server服务

  • 安装webpack-dev-server依赖

    在全局中安装npm i webpack-dev-server -g，之后在项目文件夹中安装npm i webpack-dev-server -D。

  • 引入webpack-dev-server模块

    在webpack.config.js文件中引入webpack-dev-server模块

    var WebpackDevServer = require('webpack-dev-server');

  • 打开server服务

    执行命令webpack-dev-server，浏览器手动输入http://localhost:8080 打开server服务即可成功开启服务。

    或是执行命令webpack-dev-server --open，自动会在浏览器中打开http://localhost:8080 。前提是有一个 index.html 文件指向你的 bundle，且假设 output.filename 是 bunlde.js。

热替换插件的安装以及配置

  • 安装依赖react-hot-loader（确保使用next版本）

    执行命令npm i --save babel-loader react-hot-loader@next

  • 定义用于热替换的入口路径

entry: {
  main: [
    // App 入口
    "./app/index",

    // 开启 React 代码的模块热替换(HMR)
    'react-hot-loader/patch',

    // 为 webpack-dev-server 的环境打包代码
    // 然后连接到指定服务器域名与端口
    'webpack-dev-server/client?http://localhost:9000',

    // 为热替换(HMR)打包好代码
    // only- 意味着只有成功更新运行代码才会执行热替换(HMR)
    'webpack/hot/only-dev-server',
  ],
},

  • 配置output

    output: {
  ... ...
  // 对于热替换(HMR)是必须的，让 webpack 知道在哪里载入热更新的模块(chunk)
  publicPath: "/"
},

  • 配置module

    使用 ES2015 模块使HMR正常工作，在es2015 preset设置中，将module选项设置为false。为此，需要引入react-hot-loader/babel 开启 React 代码的模块热替换(HMR)。

    module: {

rules: [
  {
    // 语义解释器，将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法
    test: /\.jsx?$/,
    include: path.resolve(__dirname, "app"),
    exclude: /node_modules/,

    // 应该应用的 loader，它相对上下文解析
    // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
    // 查看 webpack 1 升级指南。
    loader: "babel-loader",

    // loader 的可选项
    options: {
      presets: [
        // webpack 现在已经支持原生的 import 语句了, 并且将其运用在 tree-shaking 特性上
        [
          "es2015",
          {
            "modules": false
          }
        ],

        "react" // 转译 React 组件为 JavaScript 代码
      ],
      plugins: [
        "react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR)
      ]
    },
  },
]
},

  • 在webpack.config.js中模块暴露引入插件

    plugins: [
    // 开启全局的模块热替换(HMR)
    new webpack.HotModuleReplacementPlugin()
  ]

  • 在package.json中“scripts”定义start、dev

        "start": "webpack-dev-server --hot --inline",
    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base"

    之后在小黑窗中执行npm start/npm run dev操作

开启自动打开浏览器插件的安装以及配置

  • 安装OpenBrowserPlugin依赖

    全局安装OpenBrowserPlugin依赖，执行命令npm i open-browser-webpack-plugin -g，在项目中执行命令 npm i open-browser-webpack-plugin -D

  • 在webpack.config.js中plugins中配置

    new OpenBrowserPlugin(
      {
        url: 'http://localhost:8080/echart_demo.html'
      }
    )

加载器的安装以及配置

  • 安装css/sass/less loader加载器

    npm install file-loader css-loader style-loader sass-loader ejs-loader html-loader jsx-loader image-webpack-loader --save-dev

  • 加载器的配置

    webpack.config.js配置：

module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

完整package.json/webpack.config.js文件

  • 结构目录

    项目结构目录

  • package.json文件

    {
"name": "wxf",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"echarts": "^3.7.2",
"open-browser-webpack-plugin": "0.0.5",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
},
"dependencies": {
"babel-loader": "^7.1.2",
"react-hot-loader": "^3.0.0"
}
}

  • webpack.config.js文件

var path = require('path');
var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var WebpackDevServer = require('webpack-dev-server');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  //设置开发者工具的端口号,不设置则默认为8080端口
  /*devServer: {
    inline: false,
    port: 8181
  },*/
  plugins: [
    // 开启全局的模块热替换(HMR)
    new webpack.HotModuleReplacementPlugin(),
    new OpenBrowserPlugin(
      {
        url: 'http://localhost:8080/echart_demo.html'
      }
    )
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style!css"
      }
    ]
  }
}
ERROR Error: Cannot find module ‘webpack/package.json‘
郭宝的博客
01-07 8345
背景： 在通过 npm run dev 运行一个Vue项目时出现了如下报错信息 C:\Users\Administrator\WebstormProjects\memorial>npm run dev vue-admin-template@4.1.0 dev C:\Users\Administrator\WebstormProjects\memorial vue-cli-service serve INFO Starting development server… ..
webpack的json-loader
09-06
webpack的json-loader，用于进行json格式的数据转化和拼接，作为loader给webpack使用
配置package.json文件
ivenqin的博客
06-27 462
前面我们讲到，当使用 yarn init 初始化一个项目时，会自动生成一个 package.json 文件，在这个文件中可以配置项目的信息，例如名称、版本号、描述信息等，还可以定义项目所需要的各种依赖包。 package.json文件中的字段 下面是一些 package.json 文件中的字段介绍，其中 name 和 version 是 package.json 中最重要的两个必需字段，如果没有它们那么包将无法被安装，两者一起用来创建一个唯一的id。 name：包的名字，在 URL 中作为命令行参数，作为
3分钟搞定！pkg构建脚本配置模板（附5个实战案例）
最新发布
gitblog_00408的博客
10-08 724
你还在为Node.js项目打包烦恼？本文提供即copy即用的pkg构建脚本模板，3分钟完成配置，解决跨平台部署难题。读完你将获得： - 标准package.json scripts配置模板 - 5种常见场景实战案例 - 静态资源打包最佳实践 - 调试与测试技巧 ## 什么是pkg（打包工具） pkg是一款能将Node.js项目打包成可执行文件（Executable File）的工具，支持Win...
一个webpack插件可以检查包版本结合packagejson自动更新
08-07
一个webpack插件可以检查包版本，结合package.json，自动更新
webpack中的package.json文件
nicecode
08-04 839
{ "name": "webpack_code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core":
package.json的配置
蓝冰凌的博客
05-27 1381
文件是Node.js项目中的一个重要配置文件，用于存储项目的元数据和各种配置信息。
精选资源
package.json中main，module，exports三种方式的使用，自定义入口文件index.js
05-07
- `jsconfig.json`：VS Code的JavaScript配置文件，用于代码提示和导航。 - `README.md`：项目的基本说明文档，通常包含项目介绍、安装和使用方法等信息。 - `src`：源代码目录，通常包含Vue组件、路由、样式和其他...
Vue中的webpack打包（重点：webpack.config.js与package.json）
qq_51066068的博客
06-05 1246
Vue中的webpack打包（重点：webpack.config.js与package.json）
精选资源
vue2 + webpack5相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在...小记：这只是配置的 package.json 文件，更有配置好的 webpack.config.js 文件，以及整个完整的 vue2+webpack5 整个的项目，因为上传的规定可以找我来拿
vue2 + webpack4相适配的 能成功打包的 package.json 文件
08-25
vue2 项目 + webpack 打包工具，是一个非常经典的组合，但是在...小记：这只是配置的 package.json 文件，更有配置好的 webpack.config.js 文件，以及整个完整的 vue2+webpack4 整个的项目，因为上传的规定可以找我来拿
package.json文件配置详解
10-19
主要介绍了package.json文件配置详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
webpack.config.js和package.json
dixianying1299的博客
10-24 287
webpack是基于node的，所以写法采用commonjs let path=require('path'); let HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports={ 　　entry:''相对路径 入口文件 　　output:{打包后文件 　　　　filename:文件...
package.json文件中的scripts配置
weixin_62790313的博客
02-25 1006
package.json文件的理解
webpack对应的package.json
Mr_cui_的博客
05-24 336
{ “name”: “webpack-app”, “version”: “1.0.0”, “description”: “”, “main”: “main.js”, “scripts”: { “test”: “echo “Error: no test specified” && exit 1”, “build”: “webpack”, “dev”: “webpack-dev-server” }, “author”: “”, “devDependencies”: { “@babel/core”
简单粗暴配置package.json中scripts命令脚本，（配置开发环境，预发布环境，以及生产环境）
有没有认真工作的博客
02-29 1331
NEXT_PUBLIC_DOMAIN_ENV=dev 这里是关键 NEXT_PUBLIC_DOMAIN_ENV是自定义命名的。
webpack在package.json的配置
qq_41865743的博客
03-09 488
1. 我们可以在packagejson的scripts中定义自己的执行脚本。通过npminit初始化，生成package.json，npm包管理的文件(暂时没有用上，后面才会用上)npm init2. package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找执行我们的build指令
vue package.json Script配置讲解
还在活水泥的未来包工头
11-06 1628
你可以根据需要选择适当的命令来运行你的项目。例如，如果你想在开发模式下运行项目，可以使用 npm run dev 命令。如果你想构建生产环境的项目，可以使用 npm run build 命令。记住，在运行这些命令之前，确保已经在项目目录下执行了 npm install 命令，以安装所需的依赖项。这些是常见的脚本命令，用于开发、构建、检查代码质量和格式化代码。
webpack学习系列(一)：package.json相关
xiashiqi_blog的博客
03-18 794
一、package.json属性说明 name - 包名. version - 包的版本号。 description - 包的描述。 homepage - 包的官网URL。 author - 包的作者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan <zhangsan@1...
Webpack Dev Server package.json配置
07-09
<think>我们被要求使用中文回答，并在回答后提出3-5个相关问题，且以“§§相关问题§§”开头。 问题：Webpack Dev Server 在 package.json 中的配置 通常，我们在package.json中配置scripts来启动webpack dev server，而不是直接在package.json中配置dev server的选项。 配置webpack dev server的选项是在webpack.config.js中，但启动命令可以放在package.json的scripts里。 因此，回答应包含： 1. 说明package.json中通常只配置启动命令，而详细配置在webpack.config.js中。 2. 给出一个在package.json中配置启动命令的示例。 3. 如果需要在package.json中传递参数，可以使用命令行参数的方式，但更推荐在webpack配置文件中配置。 注意：根据问题，我们只需要关注package.json中的配置，即scripts部分。 示例： 在package.json的scripts字段中添加一个启动开发服务器的命令，例如： "scripts": { "start": "webpack serve --config webpack.config.js" } 另外，也可以传递一些参数，比如： "start": "webpack serve --open --hot" 但是，注意这些参数也可以在webpack.config.js的devServer中配置。 所以，我们主要展示在package.json中如何编写启动命令。 最后，按照要求提出3-5个相关问题。</think>### Webpack Dev Server 在 package.json 中的配置 在 `package.json` 中配置 Webpack Dev Server 主要通过 `scripts` 字段实现，结合命令行参数控制开发服务器行为： #### 基础配置示例 ```json { "scripts": { "dev": "webpack serve --open --mode development", "start": "webpack serve --config custom.config.js" } } ``` #### 常用参数说明 | 参数 | 作用 | 等效配置文件设置 | |---------------------|-------------------------------|-----------------------| | `--open` | 自动打开浏览器 | `devServer.open: true` | | `--port 3000` | 指定端口号 | `devServer.port: 3000` | | `--hot` | 启用热模块替换(HMR) | `devServer.hot: true` | | `--host 0.0.0.0` | 允许局域网访问 | `devServer.host` | | `--static public` | 指定静态资源目录 | `devServer.static` | | `--config xx.js` | 指定自定义配置文件 | - | #### 完整配置示例 ```json { "scripts": { "dev": "webpack serve --mode development --open --port 8080 --hot --static dist/", "dev:proxy": "webpack serve --proxy http://localhost:4000/api" }, "devDependencies": { "webpack": "^5.0.0", "webpack-cli": "^4.0.0", "webpack-dev-server": "^4.0.0" } } ``` #### 最佳实践建议 1. **优先使用配置文件**：复杂配置应在 `webpack.config.js` 的 `devServer` 对象中定义 2. **参数组合**：简单项目可直接在 CLI 命令中组合参数 3. **环境变量**：配合 `cross-env` 实现跨平台环境变量设置 4. **版本兼容**：确保 `webpack-dev-server` 版本与 `webpack` 主版本匹配
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值