github地址，覺得好的話給個star吧！

• 根據官方文檔進行配置(webpack3)

• 具有自動編譯、打包、熱更新、代碼檢查、服務器環境預覽、自動部署等功能

• 你可以在此項目中正常使用vue、react等前端框架

下面來簡單的介紹一下搭建此項目的步驟和思路

項目結構

此項目的使用方法：

  #以下命令均可在package.json和deploy.sh中進行配置

  #開發環境下運行
  npm run dev

  #使用Eslint進行代碼檢測
  npm run lint

  #打包構建
  npm run build

  #服務器環境下預覽
  npm run serve
  
  #以下命令不需要運行 npm run build，此腳本會自動幫你運行
  #自動打包部署到測試環境
  sudo sh ./deploy.sh build dev

  #自動打包部署到生產環境
  sudo sh ./deploy.sh build prod

  #如果服務器中沒有對應的目錄，你可以運行下面的代碼在部署時自動在服務器上生成一個目錄
  sudo sh ./deploy.sh build prod(or dev) newDir

首先你需要使用npm來下載一些依賴，這對于經常使用npm的同學來說并不陌生，具體的一些依賴在package.json文件里：

{
  "name": "webpack-template",
  "version": "1.0.0",
  "description": "webpack template",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server --hot --colors",
    "build": "cross-env NODE_ENV=prod webpack -p",
    "lint": "cross-env NODE_ENV=lint webpack-dev-server --open",
    "serve": "http-server ./dist -p 8888 -o"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^7.2.4",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-spread": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "clean-webpack-plugin": "^0.1.17",
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.7",
    "eslint": "^4.14.0",
    "eslint-loader": "^1.9.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-loader": "^0.5.4",
    "html-webpack-plugin": "^2.30.1",
    "http-server": "^0.10.0",
    "postcss-loader": "^2.0.10",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7",
    "webpack-merge": "^4.1.1"
  }
}

在使用時，你只需要npm install就可以了。

項目中，webpack.config.js為webpack的配置文件，當你在命令行中輸入具體的命令時，由它來進行一些任務分配，具體的代碼為:

// 獲取環境命令，并去除首尾空格
const env = process.env.NODE_ENV.replace(/(\s*$)|(^\s*)/ig,"");

// 根據環境變量引用相關的配置文件
module.exports = require(`./config/webpack.config.${env}.js`)

在config/config.js中,用來保存一些全局的變量，比如要進行打包的html模板，一些路徑等信息，在這里我只配置了html模板：

/**
 * 全局配置文件
 */
 module.exports = {
   // 項目中的html文件，不需要后綴
   HTMLDirs:[
       "a",  //a.html
       "b"  //b.html
   ]
 }

config/webpack.config.base.js是webpack的基本配置，包括打包編譯時的模板配置，loaders、打包輸出路徑等信息:

/**
 * webpack 基礎配置
 */
const webpack = require('webpack');

const path = require("path");
// 引入模板插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
//  環境變量
const env = process.env.NODE_ENV
// 提取js中的css
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 引入config.js
const config = require("./config");
// 通過 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = [];
// 入口文件集合
let Entries = {}

// 生成多頁面的集合
config.HTMLDirs.forEach((page) => {
  const htmlPlugin = new HTMLWebpackPlugin({
    filename: `${page}.html`,
    template: path.resolve(__dirname, `../src/page/${page}.html`),
    chunks: [page, 'commons'],
    minify: {
      "removeAttributeQuotes": true,
      "removeComments": true,
      "removeEmptyAttributes": true,
    }
  });
  HTMLPlugins.push(htmlPlugin);
  Entries[page] = path.resolve(__dirname, `../src/javascript/${page}.js`);
})

module.exports = {
  // 入口文件
  entry: Entries,
  // 啟用 sourceMap
  devtool: "cheap-module-source-map",
  // 輸出文件
  output: {
    filename: "javascript/[name].bundle.[hash].js",
    path: path.resolve(__dirname, "../dist"),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js'] // 配置簡寫，配置過后，書寫該文件路徑的時候可以省略文件后綴
  },
  // 加載器
  module: {
    rules: [{
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            attrs: ['img:src', 'link:href'],
            interpolate: true
          }
        }]
      }, 
      {
        // 對 css 后綴名進行處理
        test: /\.css$/,
        // 不處理 node_modules 文件中的 css 文件
        exclude: /node_modules/,
        /* 內嵌style形式 */
        // use: [{
        //   loader: 'style-loader'
        // }, {
        //   loader: 'css-loader',
        //   options: {
        //     // 開啟 css 壓縮
        //     minimize: true,
        //   }
        // }]
        /* link形式 (按照官方配置css內圖片不能加載，待解決) https://doc.webpack-china.org/loaders/style-loader*/
        // use: [
        //   { loader: "style-loader/url" ,options: { convertToAbsoluteUrls: true }},
        //   { loader: "file-loader", options: { outputPath: 'css/'}},
        // ]
        /* link打包之后引入對應的css形式(dev模式下為內嵌style形式) */
        use: env === 'prod'
          ? ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader']
          })
          : ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10000,
            // 打包生成圖片的名字
            name: "image/[name].[hash].[ext]",
          }
        }],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["url-loader"]
      }
    ],
  },
  // 插件
  plugins: [
    // new webpack.BannerPlugin('Created by YourName.')
    // 自動生成 HTML 插件
    ...HTMLPlugins
  ],
}

config/webpack.config.base.js和config/webpack.config.dev.js分別為生產環境和測試環境下的配置，config/webpack.config.lint.js是使用ESlint對代碼進行檢查的配置，具體可在github中查看,使用方法和教程都在上面，歡迎大家提issue！

·