此文根據阮一峰大神的demo結合自己的配置專案改編而成：github 1、demo01，這個是一個非常簡單的demo，請仔細實踐上一篇。

2、dem02，配置多入口檔案： 2.1、新建src/search.js，輸入document.write(‘i am search’); 2.2、dist/index.html 加上：<script src="./bundle2.js"></script> 2.3、 webpack.config.js

var path = require('path');
const config = {
  entry: {
    bundle:'./src/index.js'
 
,
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//這裡的[name]是佔位符,之後會替換為 bundle1、bundle2
  },
  devServer : {
    host: 'localhost',    // 伺服器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服務端壓縮是否開啟
    port: 3004, // 埠
    hot: true,
    open: true
 
, // 自動開啟瀏覽器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

2.4、執行：npm run build 然後執行：npm run dev

3、demo3，將js轉為es

4、demo import css 引入css 4.1、建立src/style/app.css檔案 4.2、安裝style-loader和css-loader

npm install style-loader css-loader --save-dev

4.3、src/index.js

import
 
 './styles/index.css';//使用import將css引入到js
document.write('hello wrold');

4.4、webpack.config.js

var path = require('path');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//這裡的[name]是佔位符,之後會替換為 bundle1、bundle2
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader' ]//此處用use不知道為什麼報錯
      },
    ]
  },
  devServer : {
    host: 'localhost',    // 伺服器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服務端壓縮是否開啟
    port: 3004, // 埠
    hot: true,
    open: true, // 自動開啟瀏覽器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

4.5 npm run build，會發現index.html的head執行時會新增style節點，這是bundle.js的執行結果。

5、demo05處理圖片(使用loader) 5.1、新增兩張圖片到src資料夾 5.2、index.js

import './styles/index.css';
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);

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

5.3、styles/index.css新增

.img{
    width: 100px;
    height:100px;
    background:url(../big.png);
}

5.4、webpack.config.js

var path = require('path');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//這裡的[name]是佔位符,之後會替換為 bundle1、bundle2
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader' ]
      },
      {//新增這裡
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]  
  },
  devServer : {
    host: 'localhost',    // 伺服器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服務端壓縮是否開啟
    port: 3004, // 埠
    hot: true,
    open: true, // 自動開啟瀏覽器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

5.5、insall loader

npm install --save-dev url-loader file-loader 

5.6、執行

npm run build

6、demo06

7、demo07 壓縮js（使用外掛 plugins） webpack.config.js

var path = require('path');
var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//這裡的[name]是佔位符,之後會替換為 bundle1、bundle2
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]  
  },
  plugins: [    //新增這裡
    new UglifyJsPlugin()
  ],
  devServer : {
    host: 'localhost',    // 伺服器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服務端壓縮是否開啟
    port: 3004, // 埠
    hot: true,
    open: true, // 自動開啟瀏覽器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

7.2、執行npm run build（然而好像並沒有壓縮，因為本來就是個壓縮檔案）

更新中……..