Webpack配置及使用

##如何將js模塊化
### module.exports()
### module.require()
### 自定義文件，進入時須要./
### npm下載獲得文件，不須要./

##若是使用第三方
### 1，在npm服務器中下載第三方文件
### 2，require()引用第三方文件

## 若是將靜態文件模塊化
### 1，建立css文件
### 2，下載對應的加載器
### 3，修飾咱們的css文件 !css-loader

##如何配置webpack.config.js
### 出口文件 入口文件 模塊 加載器

const path = require('path')
module.exports={
  //文件入口配置項
  entry:'./scr/index.js',
  //出口文件的配置項
  output:{
    //輸出的路徑，用了nodejs
    path:__dirname,
    //出入文件的名稱
    filename:'bundle.js'
  },
  //模塊 ：列入css，圖片如何轉換，壓接
  module:{},
  //插件，用於生產模塊和各項功能
  plugins:{},
  //配置webpack開發服務功能
  devserver:{
    //設置基本目錄結果
    contenBase:__dirname,
    //服務器ip地址
    host:'localhost',
    //服務器壓縮是否開啓
   compress:true,
    //配置服務器端口號
    port:8082
  }
}

 

##若是使用package.json啓動項
### scripts "build" "start"
##若是將es6轉換爲es5
### babel babel-core babel-loader@7 babel-preset-es2015

##如何將app.vue文件>=轉換成正常代碼
### vue-loader@8.5.4 --save
##在vue文件中加載html，css，js
vue-html-loader css-loader

下載webpack本地版本
npm i install webpack@3.6.0 --save

配置webpack服務器版本 //在咱們須要請求數據與服務器交互時使用
npm i webpack-dev-server@2.8.0 --save-dev

webpack@3.6.0和webpack-dev-server@2.8.0能夠一塊使用不會出現兼容問題

刪除webpack
npm uninstall webpack -g
加載webpack
webpack app.js bundle.js
加載webpack並監聽
webpack app.js bundle.js --watch
下載css模塊
npm install css-loader style-loader -- save-dev
babel   //使瀏覽器兼容es6的語法
npm install babel-core babel-loader babel-preset-es2015 --save-dev

 ---------------------------------------------------------------------------------------------------------------------------------------------

npm操做命令

##安裝(推薦局部安裝)
npm install webpack -g //-g 表明全局安裝
npm install webpack -s //-s 表明局部安裝

#安裝
npm install --save-dev webpack -s

#安裝 webpack-cli
npm install --save-dev webpack-cli -s //局部安裝

#建立backage.json文件
npm init -y

#安裝 style-loader css-loader
npm i style-loader css-loader -s
#安裝less的loader
npm install --save-dev less less-loader -s
#安裝file-loader加載圖片
npm install --save-dev file-loader -s
#安裝url-laoder 加載字體
npm install --save-dev url-loader -s
#安裝csv-loader xml-loader 加載數據（CSV、TSV 和 XML）
npm install --save-dev csv-loader xml-loader -s

#檢查版本是否安裝成功
webpack -v

##刪除
#全局卸載
npm uninstall webpack -g

#局部卸載npm uninstall webpack -s