摘要：續一一站到底啟動一個本地服務下載全局安裝不在插件里多帶帶當然也可以配置代理在文件頭添加注釋定義環境變量從命令行環境獲取參數定義瀏覽器中的替換的變量為但是如果打包完文件體積還是太大怎么辦呢我們可以用另外一個插件設置但是頁面必須引入分析

續webpack一——一站到底
(7)webpack-dev-server 啟動一個本地服務

  下載：npm i webpack-dev-server -g  //全局安裝
  不在插件里 多帶帶
  devServer: {
      host:"localhost",
      port:4000,
      contentBase:_dirname + "/dev"
  }
  當然也可以配置代理
  proxy: {
      "/api":{
          target: "http://localhost",
          changeOrigin:true,
          pathRewrite: {
              "^/vip": ""
          }
      }
  }

(8)webpack.BannerPlugin 在文件頭添加注釋
(9)webpack.DefinePlugin 定義環境變量

const webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV; // 從命令行環境獲取 NODE_ENV 參數
module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                "NODE_ENV": JSON.stringify(NODE_ENV)
            } // 定義瀏覽器中的替換的變量為 `process.env.NODE_ENV`
        })
    ]
}

(10)但是如果打包完文件體積還是太大怎么辦呢？

我們可以用另外一個插件CommonsChunkPlugin
設置：
{
  entry: {
   bundle: "app"
    vendor: ["app"]
  }

  plugins: {
    new webpack.optimize.CommonsChunkPlugin("vendor",  "vendor.js")
  }
}   
但是頁面必須引入
 
 

(11) 分析打包后項目用到的各種包的大小 webpack-visualizer-plugin

var Visualizer = require("webpack-visualizer-plugin");

//...
plugins: [new Visualizer({
  filename: "./statistics.html"
})],
//... 

1.版本號控制

下載htmlwebpackplugin插件
getPath("[name]@[chunkhash:6].css")
css 和 js 多 chrunk
// 生成抽離文本文件插件的實例
    new ExtractTextPlugin({
      filename: (getPath)=>{
        return getPath("[name]@[chunkhash:6].css").replace("scripts", "styles")
      },
      allChunks: true
    }),

2.devtool: "source-map" 源碼映射 方便開發時調試代碼
3.環境變量配置(mac)

設置：
    >cd ~/.profile
    >node
    >process.env
  出去  >export NODE_ENV=production   //配置環境變量
       //查看
       >node
       >process.env.NODE_ENV   => "production"
 window下是 set NODE_ENV=production
 
 然后在package.json下
 “script”: {
     "dev": "export NODE_ENV=dev && webpack && webpack-dev-server",
     "build": "export NODE_ENV=prod && webpack"
 }
 然后在config.js中針對環境進行判斷 打包
 

npm i webpack -g

webpack.config.js,同gulpfile.js和Gruntfile.js一樣，就是配置項 

// 引入webpack
var webpack = require("webpack")

// 引入文本抽離插件
var ExtractTextPlugin = require("extract-text-webpack-plugin")

// 引入html生成插件
var HtmlWebpackPlugin = require("html-webpack-plugin")

// 引入openBrowser 插件
var OpenBrowserPlugin = require("open-browser-webpack-plugin")

var outputDir = ""

if (process.env.NODE_ENV === "dev") {
  outputDir = "/dev"
} else {
  outputDir = "/prod"
}

var public = {
  // 配置入口
  entry: {
    "scripts/app": "./src/scripts/app.js",
    "scripts/search": "./src/scripts/search.js"
  },

  // 配置出口
  output: {
    filename: "[name]@[chunkhash:6].js",
    path: __dirname + outputDir  // 必須是絕對路徑
  },

  // devtool 配置
  devtool: "source-map",

  // 配置模塊
  module: {
    rules: [
      // 解析ES6+
      {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules下.js的解析
        use: [
          {
            loader: "babel-loader" // 應用babel-loader解析ES6+
          }
        ]
      },

      // 加載scss
      {
        test: /.scss$/,
        use:
        //[
          // { loader: "style-loader" },
          // { loader: "css-loader" },
          // { loader: "sass-loader" }
        //]
        // CSS抽離
          ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", "sass-loader"]
          })
      },

      // 加載css
      {
        test: /.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },

      // 加載圖片
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 1000,
          name: "media/images/[name].[hash:7].[ext]"
        }
      },

      // 加載媒體文件
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "media/mp4/[name].[hash:7].[ext]"
        }
      },

      // 加載iconfont
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "media/iconfont/[name].[hash:7].[ext]"
        }
      }
    ]
  },

  // 配置插件
  plugins: [
    // 生成抽離文本文件插件的實例
    new ExtractTextPlugin({
      filename: (getPath)=>{
        return getPath("[name]@[chunkhash:6].css").replace("scripts", "styles")
      },
      allChunks: true
    }),

    // 生成編譯HTML(index.html)的插件的實例
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      chunks: ["scripts/app"]
    }),

    // 生成編譯HTML(search.html)的插件的實例
    new HtmlWebpackPlugin({
      template: "./src/search.html",
      filename: "search.html",
      chunks: ["scripts/search"]
    }),

    // 代碼壓縮
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      }
    }),

    // 自動在打開瀏覽器打開頁面
    // new OpenBrowserPlugin({
    //   url: "http://localhost:4000"
    // })
  ]
}

var devserver = { // 配置webserver
  devServer: {
    host: "localhost",
    port: 4000,
    contentBase: __dirname + outputDir,
    noInfo: true,
    proxy: {
      "/api": {
        target: "https://api.douban.com/",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      },
      "/vip": {
        target: "http://localhost:9000/",
        changeOrigin: true,
        pathRewrite: {
          "^/vip": ""
        }
      }
    }
  }
}

if (process.env.NODE_ENV === "dev") {
  module.exports = Object.assign({}, public, devserver)
} else {
  module.exports = public
}

webpack1到webpack3的時候 loader加載格式更改
style-loader必須寫到fallback屬性上，版本1的時候直接loader:"style-loader!css-loader"
希望對大家有幫助！