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

最新推荐文章于 2025-12-02 15:55:42 发布

原创最新推荐文章于 2025-12-02 15:55:42 发布 · 1.4w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #config

开发专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了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"
      }
    ]
  }
}