vue+webpack 安裝常見插件

html-webpack-plugin

插件地址：https://www.npmjs.com/package...
安裝指令：

npm install html-webpack-plugin --save-dev

 插件做用：生成html文件，而且引用相關的 assets 文件(如 css, js)
參考地址：
html-webpack-plugin詳解
html-webpack-plugin用法全解

extract-text-webpack-plugin

插件地址：https://www.npmjs.com/package...
安裝指令：

# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

插件做用：該插件的主要是爲了抽離css樣式,防止將樣式打包在js中引發頁面樣式加載錯亂的現象(提取樣式插件)
參考地址：
extract-text-webpack-plugin 做用、安裝、使用

copy-webpack-plugin

插件地址：https://github.com/kevlened/c...
安裝指令：

npm install --save-dev copy-webpack-plugin

插件做用：拷貝資源
參考地址：
webpack---webpack中經典實用的插件copy-webpack-plugin拷貝資源插件 
webpack進階之插件篇

optimize-css-assets-webpack-plugin

地址：https://www.npmjs.com/package...
安裝指令：

npm install --save-dev optimize-css-assets-webpack-plugin

插件做用：壓縮提取出的css，並解決ExtractTextPlugin分離出的js重複問題(多個文件引入同一css文件)
參考地址：
vue-cli中的webpack配置

clean-webpack-plugin

地址：https://www.npmjs.com/package...
安裝指令：

npm install clean-webpack-plugin --save-dev

插件做用：用於在building以前刪除你之前build過的文件
參考地址：
webpack2利用插件clean-webpack-plugin來清除dist文件夾中重複的文件

vue-style-loader

地址：https://github.com/webpack-co...
安裝指令：

npm install style-loader --save-dev

插件做用：編譯vue的樣式部分

url-loader

地址：https://www.npmjs.com/package...
安裝指令：

npm install --save-dev url-loader

 插件做用：將圖片文件轉換爲base64編碼並載入瀏覽器可以減小http請求數，可是增大了js或html文件的體積

less-loader

地址：https://www.npmjs.com/package...
安裝指令：

npm install --save-dev less-loader less

插件做用： less文件加載

postcss-loader

地址：https://www.npmjs.com/package...
安裝指令：

npm i -D postcss-loader

插件做用：給不一樣瀏覽器的樣式加上前綴，如-webkit-
參考地址：
postcss-loader在webpack2的使用.

script-loader

地址：https://www.npmjs.com/package/script-loader

安裝指令：

npm install --save-dev script-loader

插件做用：在全局上下文(global context)執行一次 JS 腳本。

參考地址：script-loader

cross-dev

安裝指令：

npm i --save-dev cross-env

插件做用：cross-env能跨平臺地設置及使用環境變量，在npm腳本(可能是package.json)裏這麼配置

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

運行npm run build，這樣NODE_ENV便設置成功，無需擔憂跨平臺問題。

pushstate-server

地址：https://www.npmjs.com/package/pushstate-server

安裝指令：

npm install pushstate-server --save

做用：使用HTML5 Pushstate,開啓histroy

babel-plugin-dynamic-import-node

地址：https://github.com/airbnb/babel-plugin-dynamic-import-node

做用：動態引入improt

安裝指令：

npm install babel-plugin-dynamic-import-node --save-dev

參考

最近在學習webpack和vue，可是有不少loader的做用不是很理解，不知道有沒有關於loader全面的介紹？
個人webpack使用
CSS Modules 用法教程

後面再逐漸添加經常使用的插件。