使用webpack打包项目需要的包

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"
  }
}