vue+webpack 配置记录

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "jquery": "^3.3.1",
    "less": "^3.0.1",
    "vue": "^2.5.16",
    "vue-router": "^3.0.1",
    "webpack": "^3.11.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.0.6",
    "less-loader": "^4.1.0",
    "style-loader": "^0.20.3",
    "vue-loader": "^14.2.1",
    "vue-template-compiler": "^2.5.16",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^2.11.2"
  }
}

webpack.config.js

'use strict';
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');  //单独打包，剥离css
module.exports = {
    //入口
    entry: {
        main: './app/main.js',
        vendor: ['jquery','vue','vue-router','axios','jquery-validation'], //第三方库
    },
    output: {
        path: __dirname + '/dist/'
    },
    module: {
        rules: [{
                test: /.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader", //最终的回路使用style-loader
                    use: ["css-loader", 'autoprefixer-loader']
                })
            }, {
                test: /.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader", //最终的回路使用style-loader
                    use: ["css-loader", 'autoprefixer-loader', 'less-loader']
                })
            },{
                test: /.(jpg|png|bmp|gif)$/,
                //图片大于4096时   &name=[name].[ext]&outputPath=img/&publicPath=img    原文件名输出，outputPath打包位置，publicPath url路径位置
                loader: 'url-loader?limit=4096&name=[name].[ext]&outputPath=img/&publicPath=img',
            }, {
                test: /.(ttf|svg|eot|woff|woff2)$/,
                loader: 'url-loader?name=[name].[ext]&outputPath=fonts/&publicPath=../fonts',
            }, {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    plugins: ['transform-runtime']
                }
            }, {
                test: /.vue$/,
                loader: 'vue-loader', //vue-loader 依赖vue-template-compiler
            }, 


        ]
    },
    plugins: [new htmlWebpackPlugin({
            template: './public/index.html'
        }),
        new ExtractTextPlugin('css/[chunkhash].css'), //处理css，生成文件 , 可以引入多个不同命名的插件来分割css
        //内置提取公共模块插件
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'minifast']
                //minifast 不给一个清单文件，修改了main也仍然会导致vender的重新生成
        }),
        //内置插件完成js的压缩
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        //声明全局的Jquery
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        }),
        //处理vue开发环境的提示，告知vue当前是生产环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        })
    ],
    //dev-server 版本必须比webpack小一版
    devServer: {
        // proxy: {
        //     '/v2/*': {
        //         target: 'https://api.douban.com/',
        //         changeOrigin: true,

        //     }
        // },
        inline:true,
        contentBase: "./",

    }
}

// console.log(process.argv.length);
//webpack-dev-server --line --hot
if (process.argv.length === 5) {
    //webpack-dev-server启动的
    module.exports.output.filename = '[name].js';
} else { //webpack
    module.exports.output.filename = 'js/[name].[chunkhash].js';
}

main.js

import Vue from 'vue'
import Router from 'vue-router'
import axios from 'axios'
// import App from './components/app.vue'
// import index from './components/index.vue'
const App = r => require(['./components/App.vue'], r)    //按需，独立加载单路由的js
const index = r => require(['./components/index.vue'], r)
import "./assets/js/index.js"
import "./assets/js/test.js"
import "./assets/css/index.css"
import validate from "jquery-validation"


Vue.use(Router)
Vue.prototype.$http = axios

let router = new Router({
  routes:[{
    path: '/index', component: index
  }]
})



new Vue({
  el: '#app',
  router,
  render: c => c(App)
})

.babelrc文件 处理es6

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

项目目录结构

+app
  +assets
     js
     css
     main.js
  +conponents
    app.vue
    index.vue
+public
    index.html
+static
    img
    js
    css
webpack.config.js
package.json
.babelrc

ps 引入bootstrap字体图标时使用v3,v4显示异常，暂时不知道原因