react中webpack配置

最新推荐文章于 2024-08-25 23:10:32 发布

spcming

最新推荐文章于 2024-08-25 23:10:32 发布

阅读量582

点赞数

分类专栏： webpack配置

本文链接：https://blog.csdn.net/weixin_45578112/article/details/109209278

版权

本文介绍了在React项目中配置Webpack的基本步骤，包括处理Html、脚本、样式、图片和字体文件，使用webpack-dev-server实现代码热更新和路径转发，以及如何配置CommonsChunkPlugin提出公共模块。详细讲解了每一步的配置细节，如html-webpack-plugin、css-loader、sass-loader、url-loader、file-loader等的使用。

摘要由CSDN通过智能技术生成

webpack使用前的基础知识

webpack使用版本：3.10.0

需要处理文件类型

Html：html-webpack-plugin
脚本：babel + babel-preset-react
样式：css-loader + sass-loader
图片/字体：url-loader + file-loader

webpack常用模块

html-webpack-plugin，html单独打包成文件
extract-text-webpack-plugin，样式打包成单独文件
CommonsChunkPlugin：提出通用的模块（webpack自带）

webpack-dev-server

为webpack项目提供Web服务
使用版本：2.9.7
更改代码自动刷新，路径转发

webpack配置流程

初始化yarn和git，配置gitignore和readme
安装webpack：yarn add webpack@3.10.0 --dev
在根目录创建webpack.config.js，进行如下配置

const path = require('path');

module.exports = {
   
  entry: './src/app.js',
  output: {
   
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
};

根目录创建src文件，在src文件下创建入口文件app.js（这一步创建的文件名以及文件目录和上面webpack.config.js中进行的配置相匹配即可）

此时执行npx webpack即可进行最基本的打包工作

处理html文件的配置
执行yarn add html-webpack-plugin@2.30.1 --dev

在webpack.config.js中添加plugins的配置项，如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
     
  entry: './src/app.js',
  output: {
     
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
     
        template: './src/index.html'
    })
  ]
};

在src目录下创建index.html作为模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react-template</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

处理脚本
执行yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev
在webpack.config.js添加module

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
     
  entry: './src/app.js',
  output: {
     
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
     
    rules: [
      {
     
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
     
          loader: 'babel-loader',
          options: {
     
            presets: ['env']
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
     
        template: './src/index.html'
    })
  ]
};

react的处理
执行yarn add babel-preset-react@6.24.1 --dev
和 yarn add react@16.2.0 react-dom@16.2.0
在babel的preset中添加'react'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
     
  entry: './src/app.js',
  output: {
     
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
     
    rules: [
      {
     
        test: /\.m?js$/,
        exclude: /(node_modules)/,
        use: {
     
          loader: 'babel-loader',
          options: {
     
            presets: ['env', 'react']
          }
        }
      }
    ]