シンプルwebpack包装

ステップ
windowsシステムで包装することを例にします.

nodejs

をインストールします.

ディレクトリを選択し、新しいディレクトリ

を切り替えます.

編纂js

.webpack.co.nfig.jsと.babelrc

を配置する.

npm関連

webapck包装

認証

nodejsをインストールします
node-v 8.11.3-x 64.msiをダウンロードしてインストールします.
https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi
選択したディレクトリ、切り替え、新しいディレクトリ
D:\simple_のようなディレクトリを選択します.webpackは、このディレクトリに切り替えて、アプリとbuildを作成します.

>> d:
>> cd d:/simple_webpack
>> mkdir app
>> mkdir build

編纂js
component.jsファイルの内容は以下の通りです.

export default (text="default value") => {
    const element = document.createElement("div");
    const h1 = document.createElement("h1");
    h1.innerHTML = text;
    element.appendChild(h1);
    return element;
}

index.jsファイルの内容は以下の通りです.

import component from "./component";

document.body.appendChild(component());

component.jsとindex.jsをappディレクトリの下に置いてください.
webpack.co nfig.jsと.babelrcを設定します.
webpack.co.nfig.jsファイルの内容は以下の通りです.

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

const PATHS = {
    app: path.join(__dirname, 'app'),
    build: path.join(__dirname, 'build'),
};

module.exports = {
    entry:{
        app: PATHS.app,
    },
    output:{
        path: PATHS.build,
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            titile: 'webpack demo',
        }),
    ],
    mode: 'development'
};

babelrcファイルの内容は以下の通りです.

{
  "presets": ["es2015"],
  "plugins": []
}

babelrcとwebpack.co.nfig.jsファイルを現在のディレクトリに置く.すなわちD:\simple_webpackディレクトリ
npm関連
npm関連命令を実行します.

//    ，      Enter
>> npm init
//   webpack webpack-cli
>> npm install webpack --save-dev
>> npm install webpack-cli --save-dev
//   html_webpack-plugin  
>> npm install html_webpack_plugin --save-dev
//   babel
>> npm install babel-core --save-dev
>> npm install babel-loader --save-dev
>> npm install babel-preset-es2015 --save-dev

webapck包装
コマンドを実行

>> node_modules\.bin\webpack

検証
buildディレクトリに生成されたindex.ファイルを見つけてブラウザを選択して開きます.
注意
オペレーティングシステムがアップグレードされるにつれて、またはnode、npm、webpack、plugin、loaderバージョンが更新され、パッケージはいくつかの変化が生じます.疑問があれば一緒に検討してもいいです.
参照
webpack中国語の文書
https://www.webpackjs.com/concepts/