webpack手动搭建react项目的配置文件

2021-03-08 12:31:15 阅读：132 来源： 互联网

标签：const 配置文件 plugin js react webpack loader

这是我之前使用react开发的第一个正式项目，用webpack手动搭建的
webpack.common.js

/*
 * @Author: 刘~
 * @Date: 2021-02-20 12:57:24
 * @LastEditTime: 2021-03-08 10:22:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \qbxy_skill_admin\webpack.common.js
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const webpack = require('webpack');
const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 打包路径与文件名
    output: {
        filename: 'bundle.[hash].js',
        path: path.join(__dirname, '/dist')
    },
    module: {
        // 配置相应的规则
        rules: [{
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            }, {
                test: /\.js[x]?$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    'less-loader',
                    {
                        loader: 'style-resources-loader',
                        options: {
                            patterns: path.resolve(__dirname, './src/style/comm.less')//全局less文件
                        }
                    }
                ]

            },
            {
                test: /\.(ttf|eot|woff|woff2|svg)/,
                include: path.resolve(__dirname, './public/iconfont'),
                use: ['file-loader']
            },
            {
                test: /\.(png|svg|jpg|gif|jpeg)$/,
                include: path.resolve(__dirname, './src'),
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 10240,
                        name: 'images/[hash].[ext]',
                        publicPath: "/"
                    }
                }]
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: ['ts-loader']
            }
        ]
    },
    // 配置相应的插件
    plugins: [
        new CleanWebpackPlugin(), // 打包前清空
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "./public/index.html"),
            favicon: path.resolve('./public/qingbei.ico')
        }),
        new ManifestPlugin(), //防止部署服务器后路径找不到index.js
        new webpack.HotModuleReplacementPlugin(), //热更新模块

    ]
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
	// 设置为开发模式
    mode: 'development',
    devtool: 'inline-source-map',
    // 配置服务端目录和端口
    devServer: {
        contentBase: './dist',
        port: 9091,
        proxy: {
            '/qbxyapi': {
              target: 'https://www.skedu.vip/qbxyapi/',//admin.skedu.vip
              changeOrigin: true,
              ws: true,
              pathRewrite: {
                '^/qbxyapi': '/'
              }
            }
          }
    }
});

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
	// 设置为生产模式
    mode: 'production'
});

package.json

{
  "name": "demo-2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "braft-editor": "^2.3.9",
    "braft-utils": "^3.0.12",
    "qiniu": "^7.3.2",
    "react": "^16.8.6",
    "react-copy-to-clipboard": "^5.0.2",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "antd": "^4.7.0",
    "autoprefixer": "^9.6.0",
    "axios": "^0.20.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.13.1",
    "babel-polyfill": "^6.26.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^2.1.1",
    "es6-symbol": "^3.1.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "i": "^0.3.6",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mobx": "^6.0.1",
    "mobx-react": "^7.0.0",
    "mobx-react-lite": "^2.0.7",
    "moment": "^2.29.1",
    "npm": "^6.14.8",
    "postcss-loader": "^3.0.0",
    "qiniu-js": "^3.1.1",
    "react-app-polyfill": "^1.0.6",
    "react-hot-loader": "^4.13.0",
    "react-loadable": "^5.5.0",
    "style-loader": "^0.23.1",
    "style-resources-loader": "^1.3.3",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "url-loader": "^4.1.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3",
    "webpack-dev-server": "^3.7.1",
    "webpack-manifest-plugin": "^2.2.0",
    "webpack-merge": "^4.2.1"
  }
}

标签：const,配置文件,plugin,js,react,webpack,loader
来源： https://blog.csdn.net/weixin_43222302/article/details/114527205

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack手动搭建react项目的配置文件