總結 webpack 的插件

　　模塊化第一步  初始化 package.json 文件 

　　node.js　　指令　　npm init

　　npm的官網：https://www.npmjs.com/　　 搜索插件名，查看插件的用法

　　1.　webpack 雖然並無什麼突出的地方，可是他的插件卻很是多且好用；

　　　　　　npm node包管理工具，能夠對包進行 增 刪 查 改

　　　　　　下載 npm 包的指令　　npm install 包名

　　2.　cnpm 淘寶 npm 鏡像：與 npm 同樣，可是比 npm 下載的快

　　　　　　指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

　　3.　利用 browserify  對 js 文件，進行打包編譯

　　　  　　下載指令：npm install browserify --save-dev

　　　　　　打包指令：browserify 主文件>要打包的文件

　　4.　利用 package.json 文件，恢復以前所下載的包

　　　　　　指令：npm install

　　5.　webpack 能夠對前端資源進行打包　　（前端資源：js css json 圖片都可打包）

　　　　　　下載指令：npm install webpack@3.8.1 --save-dev　　（--save-dev：開發環境， @指令版本號 ）

　　6.　webpack-dev-server 能夠經過ctrl+s 來進行實時刷新的插件

　　　　　　下載指令：npm install webpack-dev-server@2.9.4 --save-dev　　(webpack的附屬產品，要比webpack第一個大版本，如 webpack 是3點多的版本，他的附屬產品只能的2點多)

　　　　　　實時刷新指令：webpack-dev-server --hot --inline

　　7.　若是隻想用 webpack 來實現一鍵打包，咱們須要在當前目錄下，建立一個 webpack.config.js 文件

　　　　　　文件內容的配置：http://www.javashuo.com/article/p-cwxjnkpz-bm.html

　　8.　若是咱們想 經過一個指令來跑咱們的 node.js，咱們只能經過 package.json 文件

　　　　　　指令：npm run dev

　　　　　　文件內容的配置：http://www.javashuo.com/article/p-kfofkyfm-bd.html

　　9.　想要去改相對路徑變成絕對路徑 咱們須要用到 node 自帶的插件；

　　　　　　指令：var path=require("path");

　　　　　　用法：path.resove()　　方法，參數一：必填：dirname（當前目錄） 參數二：必填："./指定目錄下" 　　在 webpack.config.js中操做

　　10.　要自動打開瀏覽器的插件：open-browser-webpack-plugin

　　　　　　下載指令：npm open-browser-webpack-plugin --save-dev

　　　　　　文件內容的配置：官網搜 open-browser-webpack-plugin

　　11.　配置服務器：經過 devServer 屬性  在webpack.config.js 文件，接口 module.exports={} 中

　　　　　　指定跟目錄：contentBase:

　　　　　　指定端口：port:

　　12.　打包圖片的插件

　　　　　　指令下載：npm install url-loader --save-dev　　主要是針對 css 打包的背景圖，很差用

　　　　　　插件用法：官網搜 url-loader

　　13.　打包 css 的插件

　　　　　　指令下載：npm install style-loader css-loader --save-dev

　　　　　　插件用法：官網搜 css-loader

　　14.　打包 json 的插件

　　　　　　指令下載：npm install json-loader --save-dev

　　　　　　插件用法：官網搜 json-loader

　　15.　打包 es6 插件（將 es6 轉爲 es5 ）

　　　　　　指令下載：npm install -D babel-loader @babel/core @babel/preset-env

　　　　　　插件用法：官網搜 babel-loader

　　16.　將 css 與 js 分離的插件

　　　　　　指令下載：npm install extract-text-webpack-plugin --save-dev

　　　　　　插件用法：官網搜 extract-text-webpack-plugin

　　17.　less的配置：（es6寫法的css文件）

　　　　　　指令下載：npm install less less-loader --save-dev

　　　　　　插件用法：官網搜 less-loader

　　18.　查看 node 的版本

　　　　　　指令：node -v