babel轉譯es6==>es5

npm install babel-core --save-dev

npm install babel-loader --save-dev

npm install babel-preset-es2015 --save-dev

npm install babel-preset-stage-0     解es7語法

新建檔案 .babelrc

解析樣式

css-loader   

style-loader

預處理

less  

less-loader

解析圖片

file-loader

url-loader

解析html，自動插入

html-webpack-plugin

webpack-dev-server

解析vue

vue

vue-loader

vue-template-compiler

生成專案檔案

vue init webpack 專案名

//webpack.config.js檔案
const path=require('path');
//用來將打包的檔案自動引入html並輸出到dist目錄下
var HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports={
        entry:'./src/main.js',  //打包的入口檔案，webpack會自動查詢相關的依賴包進行打包
        output:{
            filename:"bundle.js",  //打包後的名字
            path:path.resolve('./dist')   //必須是一個絕對路徑
        },
        module:{
            rules:[
                {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
                //use時從右向左寫
                {test:/\.css$/,use:['style-loader','css-loader']},
                {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
                //轉化base64只在8192位元組下轉化，其他情況輸出圖片
                {test:/\.jpg$/,use:'url-loader?limit=8192'},
                {test:/\.vue$/,use:'vue-loader'}
            ]
        },
        plugins:[
            new HTMLWebpackPlugin({ //自動插入到dist目錄下
                template:'./src/index.html',//使用的模板
                //filename:'login.html'   //產出的檔名,預設為原檔名
            })
        ]

    }
 

//.babelrc檔案
{
    "presets": ["es2015","stage-0"]
}

//package.json檔案
{
  "name": "vue-load",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev":"webpack-dev-server",
    "build":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader":"^7.1.2",
    "babel-preset-es2015":"^6.24.1",
    "babel-preset-stage-0":"^6.24.1",
    "css-loader":"^0.28.7",
    "file-loader":"^1.1.5",
    "html-webpack-plugin":"^2.30.1",
    "less":"^3.0.0-alpha.3",
    "less-loader":"^4.0.5",
    "style-loader":"^0.19.0",
    "url-loader":"^0.6.2",
    "vue-loader":"^13.3.0",
    "vue-template-compiler":"^2.5.2",
    "webpack":"^3.8.1",
    "webpack-dev-server":"^2.9.2"
  },
  "dependencies": {
    "bootstrap":"^3.3.7",
    "vue":"^2.5.2",
    "vue-router":"^3.0.1"
  }
}