1.据え付け
まずnodeとnpmを入れます.webpackはnodeに基づくプロジェクトですから.そして

npm install -g webpack

2.プロジェクトの作成
ファイルを作成して、新規にpackage.jsonのファイルをプロジェクトのルートディレクトリの下に作成します.

mkdir testwebpack
cd  testwebpack
npm init

2.1問い合わせのいくつかの問題:回車でデフォルト値を選択して自動的にファイルを生成する

 package.json
 package name: (webpack-test)     (demo)
 version: (1.0.0)                 
 description:                     
 entry point:                       (main.js)
 test command:                      ("dev": "webpack-dev-server","build": "webpack -p")
 git repository:                node_modules
 keywords:                         
 author:                          
 license: (ISC) MIT             MIT
 Is this ok? (yes)              yes    

3.webpack.co.nfig.jsを作成しています.

module.exports = {
  entry: './main.js',  /*     js  */
  output: {
    filename: 'bundle.js'  /*        */
  },
   module: {
rules:[
  {
    test: /\.css$/, /*  css    */
    use: [ 'style-loader', 'css-loader' ]
  },
]
  },
  module: {
rules:[
  {
    test: /\.(png|jpg)$/, /*        */
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }
]
 }
};

3.1例えば私のmail.jsに書いてください.

    
document.write('
Hello World
');

require('./app.css');

var img = document.createElement("img");
img.src = require("./small.png");
document.body.appendChild(img);

3.2包装後に使用するJSを確認し、ファイルを作成する

4.サーバの

npm i -g webpack webpack-dev-server

5. をインストールします.

  npm install

6.

 npm run dev