webpack 4の基礎構成

グローバルインストール

cnpm install webpack -g

packet.jsonファイルを初期化します.

cnpm init

プロジェクトにインストール

cnpm install webpack
//cnpm install webpack-cli     

ローカルプロジェクトディレクトリ作成プロファイル

webpack.config.js

html-webpack-pluginモジュールと必要ないくつかのloaderをインストールします.
これはJavaScript以外の任意の静的リソースを包装することを許可します.Loadersは単独でインストールし、webpack.co nfig.jsの下のmodulesキーワードで構成する必要があります.Loadersの構成オプションは以下のいくつかの態様を含みます.test:Loadersの処理したファイルに合致する拓展名の正規表現(必須)loader:loaderの名前(必須)include/exclude:処理しなければならないファイル/フォルダを手動で追加したり、処理不要のファイル/フォルダをブロックしたり(オプション)options:Loadersに追加の設定オプションを提供します(オプション)

//  html-webpack-plugin  
cnpm install html-webpack-plugin

//  css-loader style-loader
cnpm install --save-dev css-loader style-loader

//    es6     
 //cnpm install --save-dev babel-core babel-loader babel-preset-es2015
//babel-preset-es2015     ，      babel-preset-env；
cnpm install babel-loader babel-core babel-preset-env

サーバの熱応答を設定
あなたのブラウザに修正したコードを監視してもらいたくないです.自動的に修正した結果を更新します.実はWebpackはオプションのローカル開発サーバを提供しています.このローカルサーバはnode.jsに基づいて構築されています.これらの機能を実現できます.ただし、単独のコンポーネントです.Webpackで設定する前に、プロジェクト依存として単独でインストールします.端末に下記のコマンドを入力して対応部品をインストールします.同時にグローバルにインストールして、プロジェクトディレクトリにインストールすることをお勧めします.
まずグローバルインストール

cnpm install -g webpack-dev-server

あなたのプロジェクトディレクトリにインストールします.

cnpm install --save-dev webpack-dev-server

//
devserver    Webpack         ，        
contentBase    webpack-dev-server             ，
                     ，
            （     “public"  ）.
port         ，    ，   "8080".
inline     true，              .
historyApiFallback             ，
     HTML5 history API，      true，        index.html.

   webpack.config.js         .
  
 devServer: {
    contentBase: "./public",
    port: "9000",
    inline: true,
    historyApiFallback: true,
  }

ショートカットの追加
package.jsonファイルのscriptsオプションを編集します.

"scripts": {
      "start": "webpack-dev-server --hot --inline"
},

webpack.co nfig.jsに関連内容を配置する.

    //           
    var path = require("path");//  path  
    var webpack = require("webpack"); //  webpack  
    var ROOT_PATH = path.resolve(__dirname);
    var APP_PATH = path.resolve(ROOT_PATH, 'app');
    var Pro_PATH = path.resolve(ROOT_PATH, 'project');
    //  html    
    var htmlwebpackplugin = require("html-webpack-plugin");

    module.exports={
        mode: 'production',//    ，         development     
    entry:app_path,        //    
    output:{               //    
        path:build_path,    //            
        filename:"build.js"  //       
    },
    //        
     devServer: {
                contentBase: "./public",
                port: "9000",
                inline: true,
                historyApiFallback: true,
        },
     //       loader, webpack4，loaders    rules
        module:{
           rules:[  //css style loader
           {
            test:/\.css$/,
            loaders:["style-loader","css-loader"],
              include: APP_PATH
            },
            {      //js loader（  es6）
            test:/\.js$/,
            loader:["babel-loader"],
              include: APP_PATH,
              query: {
                 presets: ['preset-env']
               }
             }
           ]
        },
      //      
      plugins:[
        new htmlwebpackplugin({
            title:"  ",
            template:"./app/template.html" //       
        })，
        new webpack.ProvidePlugin({  //          ,       
              $: "jquery",
              jQuery: "jquery",
              "window.jQuery": "jquery"
           })
    ]
}

マルチファイルの入り口を設定したいなら
参照

var path = require('path');
var webpack = require("webpack");
var HtmlwebpackPlugin = require('html-webpack-plugin');
//           
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var Pro_PATH = path.resolve(ROOT_PATH, 'project');
var COMMON = path.resolve(ROOT_PATH, 'public');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
  mode: 'production',
  //                      index.js             
  entry: {
    index:APP_PATH+"/index.js",
    Pro1:Pro_PATH+"/Pro1.js",
    com:COMMON+"/common.js"
  }, 
  //            js    bundle.js
  output: {
    path: BUILD_PATH,
    filename: '[name].[hash].js'//  hash    js     
  },
  //        
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    contentBase: "./app"
  },
  module: {//  loader
    rules: [
       {
         test: /\.css$/,
         use: [ 'style-loader', 'css-loader' ]
       }，
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
     },
     {//   es6     
         test: /\.js?$/,
         loader: 'babel-loader',
         include: APP_PATH,
         options: {
           presets: ['preset-env']
         }
       },
    ]
  },
  //               html  
  plugins: [
    new HtmlwebpackPlugin({
    title: '  ',
    template: path.resolve(APP_PATH, 'index.html'),
    filename: 'index.html',
    //chunks           entry         
    chunks: ["index","com"],
    //  script      
    inject: 'body'
  }),
  new HtmlwebpackPlugin({
    title: '   ',
    template: path.resolve(Pro_PATH, 'Pro1.html'),
    filename: 'Pro1.html',
    chunks: ["Pro1","com"],
    inject: 'body'
  }),

   //     jquery        
     new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
};

実例(単純圧縮js)

//  html-webpack-plugin
var htmlwebpackplugin = require("html-webpack-plugin");
var path = require("path");

module.exports = {
    entry:{
          index:__dirname+"/dist/index.js",
          information:__dirname+"/dist/infomation.js",
          detail:__dirname+"/dist/detail.js"
    },
    output:{
        path:__dirname+"/build",
        filename:"[name].js"
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                loaders:["babel-loader"],
                exclude: path.resolve(__dirname,'/app/')
            }
        ]
    }
}