浅学webpack[2]

浅学webpack[2]

webpack.config.js文件

// webpack 的基本配置文件 (修改就要重启)

// mode 打包环境
// 入口
// 出口

// 模块打包规则 (module-loader)
// CSS/JS/PNG/React/Vue/JSON

// plugin 插件

// 配置服务器 
const path = require('path')
const openBrowserPlugin = require("webpack-open-browser-plugin")   // 自动打开浏览器 
const htmlWebpackPlugin = require('html-webpack-plugin')   // 打包HTML 文件 
const miniCssExtractPlugin = require('mini-css-extract-plugin')   // 打包并且抽离CSS
const webpack = require('webpack')

// console.log(webpack)
module.exports = {
    
    
    mode:"development", // production
    entry:['./src/main.js'],  // 入口 多个入口文件
    output:{
    
    
        path:path.join(__dirname,'dist'), 
        filename:'js/[name].[fullhash:8].js',  // fullhash:8 长度为8的随机字符串 避免JS文件名相同导致浏览器缓存 
    },

    devtool:"source-map", // 打开你的资源图 方便在线调试  (缺点 容易被别人偷代码 上线一定要关闭)

    // 别名
    resolve:{
    
    
        alias:{
    
    
            "@":path.resolve('src'), 
            "~":path.resolve('src/utils'), 
        }
    },

    // 模块打包 
    module:{
    
      //   模块打包规则 (module-loader)
        rules:[
            {
    
    
                test:/\.css$/,
                use:[miniCssExtractPlugin.loader,'css-loader'],
            },
            {
    
    
                test:/\.less$/,
                use:[miniCssExtractPlugin.loader,'css-loader','less-loader'],
            },
            {
    
       
                test:/\.(sass|scss)$/,
                use:[miniCssExtractPlugin.loader,'css-loader','sass-loader'],
            },
            {
    
    
                test:/\.(js|jsx|ts|tsx)$/,
                exclude:/node_modules/,
                use:['babel-loader']
            },
            {
    
    
                test:/\.(png|gif|svg|jpg|eot|ttf|woff|woff2)$/,
                use:[
                    {
    
    
                        loader:"url-loader",
                        options:{
    
    
                            limit:8192,  // 8M图片最大8M 
                            name:'imgs/[name].[hash:8].[ext]' // 404.png =>  404.1234qwer.png 
                        }
                    }
                ]
            }
        ]
    },


    // 配置服务器 
    devServer:{
    
    
        host:"0.0.0.0",   // 主机名  localhost  0.0.0.0 => 指向的所有的IP字段 
        port:7700,     // 端口 
        hot:true,      // 热更新  
        // open:true,    // 自动打开浏览器 
        proxy:{
    
      // 代理

        }
    },
    
    // webpack 插件 
    plugins:[
        // 打开浏览器 
        new openBrowserPlugin({
    
    
            url:"http://localhost:7700"
        }),

        // 打包HTML 
        new htmlWebpackPlugin({
    
    
            inject:true,  //  自动注入css/js
            minify:true,  // 压缩文件 
            template:'./public/index.html'
        }),

        // 抽离css
        new miniCssExtractPlugin({
    
    
            filename:'css/[name].[contenthash:8].css', // 打包的文件名
            chunkFilename:'css/[id].[contenthash:8].css'
        }),

        new webpack.HotModuleReplacementPlugin(),  // webpack 热替换模块 

        new webpack.ProvidePlugin({
    
       // 全局自动引入文件 
            axios:'axios',
            React:'react',
            Component:['react','Component']
        })
    ]
}

package.json 文件

{
    
    
  "name": "react-jiazi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rimraf dist && webpack",
    "start": "webpack-dev-server --hot",
    "prod": "rimraf dist && webpack mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
    
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^6.7.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.2",
    "sass": "^1.56.2",
    "sass-loader": "^13.2.0",
    "source-map": "^0.7.4",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-open-browser-plugin": "^1.0.7"
  },
  "dependencies": {
    
    
    "@reduxjs/toolkit": "^1.9.1",
    "axios": "^1.2.1",
    "immutable": "^4.1.0",
    "mobx": "^5.15.7",
    "mobx-react": "^6.3.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.5.0",
    "redux": "^4.2.0",
    "redux-immutable": "^4.0.0",
    "redux-promise": "^0.6.0",
    "redux-saga": "^1.2.2",
    "redux-thunk": "^2.4.2",
    "swiper": "^4.5.1"
  }
}

完结撒花