Webpack实战精讲-优快云博客

本文详细介绍Webpack的安装配置、基本使用，包括ES6+React的整合、html-webpack-plugin插件使用、webpack-dev-server服务搭建、HotModuleReplacement热更新、动态加载模块等高级特性。

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

一：安装
npm install -g webpack
npm install -g webpack-cli

二：demo
1. 构建package.json文件
npm init -y
在package.json中，默认./src/index.js将是程序入口
2. package.json文件增加build参数和dev参数
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
说明：--mode development对文件不进行压缩，--mode production对文件进行压缩
3. 创建./src/index.js文件

 console.log(`这是入口文件`);

4. 运行打包
npm run dev
目录下多了一个./dist/main.js，这个文件是webpack对./src/index.js的打包结果

三： ES6+React
1. cd根目录，在当前目录安装相关node modules

npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev

执行上面的命令以后，package.json文件的devDependencies节点会增加相关的依赖项

2. 创建.babelrc配置文件
在windows添加带点的文件，方法如下：打开cmd，然后输入：echo hi > .babelrc
修改.babelrc的内容：
3. 新建webpack.config.js文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

4. 新增./src/app.js

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return (
    <div>
      <p>React here!</p>
    </div>
  );
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));

5. 修改./src/index.js
import App from "./App";
6. npm run dev
7. error-Error: Cannot find module '@babel/core'
npm uninstall babel-loader
npm install babel-loader@7.1.5

四：使用html-webpack-plugin插件对html进行打包
1. 新建./src/index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack4 Test</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

2. 安装相关依赖

npm i html-webpack-plugin html-loader --save-dev

3. 修改webpack.config.js

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

4. npm run dev

五：使用webpack-dev-server插件
webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.
1. 为当前项目安装依赖包
npm i webpack-dev-server --save-dev
2. 修改package.json，在scripts节点添加
"start": "webpack-dev-server --mode development --open"
3. 修改webpack.config.js文件，新增devServer

devServer: {
    contentBase: require('path').join(__dirname, "dist"),
    compress: true,
    port: 8033,
    host: "127.0.0.1",
}

4. 执行npm run start以启动webpack dev server

六：Hot Module Replacement
使用Hot-Module-Replacement，可以在webpack工程中要实现热加载(更新局部的修改)。
1. 为项目安装依赖
npm i react-hot-loader --save-dev
2. 修改.babelrc文件，新增plugins选项

{
  "presets": ["env", "react"],
  "plugins": ["react-hot-loader/babel"]
}

3. 修改webpack.config.js文件

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack'); 	    // 使用Hot Module Replacement而新增
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new webpack.NamedModulesPlugin(),           // 使用Hot Module Replacement而新增
    new webpack.HotModuleReplacementPlugin() 	// 使用Hot Module Replacement而新增
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),	// 这里修改为 path
    compress: true,
    port: 8033,
    host: "127.0.0.1",
    hot: true,                                 // 使用Hot Module Replacement而新增
  }
};

4. 修改./src/app.js

import React from "react";
import ReactDOM from "react-dom";
import { hot } from 'react-hot-loader' //使用Hot Module Replacement而新增
const App = () => {
  return (
    <div>
      <p>React here!</p>
    </div>
  );
};
//export default App;
export default hot(module)(App); // 使用Hot Module Replacement而
ReactDOM.render(<App />, document.getElementById("app"));

5. npm run start
6. 修改./src/app.js文件，可以看到热加载效果

七：动态加载模块
1. 动态加载普通JS模块
1) 安装babel-plugin-syntax-dynamic-import
npm i babel-plugin-syntax-dynamic-import --save-dev
2）使用格式

let filename = 'xxxx.js'; 
import('./' + filename). then(module =>{
    console(module);
}).catch(err => {
    console(err.message); 
});

//如果你知道 export的函数名
import('./' + filename). then(({fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

//如果你用的是export default function() 
import('./' + filename). then(module =>{
    console(module.default);
}).catch(err => {
    console(err.message); 
});

3）修改.babel文件

{
  "presets": ["env", "react"],
  "plugins": ["react-hot-loader/babel","syntax-dynamic-import"]
}

4）创建./src/myModule.js文件

export let counter = 3;
export function incCounter() {
  counter++;
}

5）修改入口人间./src/index.js简单测试一下

//console.log(`这是入口文件`);
import App from "./App";
let filename = 'myModule.js';
import('./' + filename).then(({counter, incCounter})=>{
	console.log(counter); //3
	incCounter(); 
	console.log(counter); //3
});

6）npm run start

注意：import()加载的是模块的拷贝，如上图运算的结果都是3
而import则不同，它加载的是模块的引用，如下所示：

import {counter, incCounter} from './module.js';
console.log(counter); //3
incCounter();
console.log(counter); //4

2. 动态加载React模块
1）. 有两个组件，一个组件是import的组件，另一个是渲染组件

// 引用组件
import Bar from './components/Bar';
// 渲染组件
class Foo extends React.Component {
  render() {
    return <Bar/>;
  }
}

通过import引入Bar这个组件，这是一个同步的引入，但是我们在渲染之前是并不需要这个组件的，所以我们为何不推迟引入这个组件呢？

2）. 使用react-loadable进行动态加载

import Loadable from 'react-loadable';

// 动态加载引用组件
const LoadableBar = Loadable({
  loader: () => import('./components/Bar'),
  //当时还在loadding或认为加载引用组件失败的时候，需要渲染出去的
  loading() {
    return <div>Loading...</div>
  }
});
// 渲染组件
class MyComponent extends React.Component {
  render() {
    return <LoadableBar/>;
  }
}