webpack入门

webpack入门
入门教程链接: 入门 Webpack，看这篇就够了.
注意：

1. 原作者版本是webpack@3，我的webpack是@5，很多相关属性都变了，所以有出入很正常
2. 有问题，多Google

我是按照人家的教程一点点学习，现po上实现后的代码：

1. 文件目录
   

2. 软件版本：
   

3. config.json

{
    "greetText": "Hi there and greetings from JSON!"
}

4. Greeter.css

.root {
    background-color: #eee;
    padding: 10px;
    border: 3px solid #ccc;
  }

5. Greete.js

// var config = require('./config.json')
// module.exports = function() {
//     var greet = document.createElement('div');
//     greet.textContent = config.greetText;
//     return greet;
// }
import React, { Component } from 'react';
import config from './config.json';
import styles from './Greeter.css';
class Greeter extends Component {
    render() {
        return(
            <div className={styles.root}>
                {config.greetText}
            </div>
        )
    }
}
export default Greeter;

6.main.css

html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: normal;
  }
  
  h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
    padding: 0;
  }

7.main.js

// const greeter = require('./Greeter.js');
// document.querySelector('#root').appendChild(greeter());
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import './main.css';

render(<Greeter />, document.getElementById('root'));

8.(.babelrc)

{
    "presets": ["env", "react"],
    "env": {
        "development": {
            "plugins": [
                ["react-transform", {
                    "transforms": [{
                        "transform": "react-transform-hmr",
                        "imports:": ["react"],
                        "locals": ["module"]
                    }]
                }]
            ]
        }
    }
}

9.package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development",
    "server": "webpack-dev-server --mode development --open --hot",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^5.2.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^6.2.0",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.2.5",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  },
  "dependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-react": "^7.16.0",
    "banner-plugin": "^1.0.10",
    "mini-css-extract-plugin": "^2.4.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.62.1"
  }
}

10.package.json

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

11.webpack.config.js

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + '/app/main.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
  },
  devServer: {
    static: './public',
    historyApiFallback: true,
    liveReload: true,
    // inline: true
  },
  module: {
    rules: [{
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [{
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              }
            }
          },
          {
            loader: "postcss-loader",
          }
        ]
      },
    ],
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: '版权所有 翻版必究',
    }),
    new HtmlWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ]
}

12.webpack.production.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
  devtool: false,
  entry: __dirname + '/app/main.js',
  output: {
    path: __dirname + '/public',
    filename: 'bundle-[hash].js',
    clean: true,
  },
  devServer: {
    static: './public',
    historyApiFallback: true,
    liveReload: true,
    hot: true,
  },
  module: {
    rules: [{
        test: /(\.jsx|\.js)$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [{
            loader: "style-loader",
          },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: '[name]__[local]--[hash:base64:5]',
              }
            }
          },
          {
            loader: "postcss-loader",
          }
        ]
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: '版权所有 翻版必究',
    }),
    new HtmlWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new CleanWebpackPlugin()
  ]
}