Webpack配置-初探

webpack是一个用于JavaScript 应用程序的 静态模块打包工具，这里我们简单配置一个基于webpack的demo。

---

1.初始化package.json文件，按需安装需要的依赖

使用npm安装webpack：

//全局安装webpack
npm install -g webpack

在终端(terminal)使用命令自动创建package.json文件：npm init 

{
  "name": "webpack-try",
  "version": "1.0.0",
  "description": "这是一个webpack测试小栗子",
  "main": "index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.32.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^5.2.1",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^2.0.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open",
    "start": "webpack"
  },
  "author": "Lee",
  "license": "ISC"
}

PS：在安装各类依赖时可能会遇到版本冲突的问题，建议查找合适的版本进行安装。

2.配置webpack.config.js

配置文件主要包含入口（entry）、输出（output）、loader、插件（plugins）等。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //程序入口
    entry: __dirname+"/app/main.js",
    output: {
        //输出路径(唯一)
        path: __dirname+"/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./build",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /\.(js|mjs|jsx|ts|tsx)$/,
                use:{
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env","react"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname+"/app/index.temp.html"
        })
    ],
};

3.采用ES6引入react实现组件化

组件化一个实例，效果如下。

import React,{Component} from 'react'
import config from './config.json';
import styles from './Hi.css'

class Hi extends Component{

    render() {
        return (
            <div className={styles.root}>
                {config["say something"]}
            </div>
        );
    }
}
export default Hi