webapck笔记

本文详细介绍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/>;
  }
}

 







 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值