webpack

// 初始化 package.json 文件
npm init -y

// 安装 webpack
npm i -D webpack

// 安装 webpack 3 最新版本
npm i -D webpack@3

// 4.0 版本打包需安装
npm i -D webpack-cli

// webpack html插件
npm i -D html-webpack-plugin

// 预处理模块安装
npm i -D babel-loader babel-core
// 解析 jsx
npm i -D babel-preset-react

• package.json
  配置 npm run <command> 指令

{
    "scripts": {
        // 默认找到 webpack.config.js
        "build": "webpack",
        // 若非默认文件名，则需进行设置
        "build": "webpack --config webpack.config.dev.js"
    }
}

• 构建指令

npm run build

config.js 配置项解析

webpack.config.js:

// 使用 path 来获取项目运行的绝对路径
const path = require('path');

// 导入 webpack 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 使用node模块导出方式
module.exports = {
    // 项目入口文件，webpack根据入口文件分析整个项目
    entry: './src/app.js',
    // 打包输出
    output: {
        // 输出路径(绝对路径)
        path: path.resolve(__divname, 'dist'),
        // 文件名
        filename: 'app.js'
    },
    // 设置模式 development(开发环境)、 production(生产环境)
    mode: 'development',
    // webpack 插件应用
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            // 以哪个文件作为模板创建
            template: 'src/index.html'
        })
    ],
    module: {
        rules: [{
            // 匹配文件
            test: /\.js/, 
            // 处理匹配文件
            use: [{
                loader: 'babel-loader',
                // 选项配置
                options: {
                    presets: ['react']
                }
            }]
        }]
    }
}