webpack.base.js 文件

const path = require('path');

const webpack = require('webpack');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';

// console.log( 'devMode === ', devMode );

function resolve (dir) {

let newPath = path.join(__dirname, '..', dir);

// console.log("newPath == ", newPath);

return newPath;

}

let baseConfig = {

resolve: {

// 定义别名

alias: {

'@': resolve('src'),

'vue$': 'vue/dist/vue.esm.js',

},

// 告诉webpack解析模块时应该搜索哪些目录

modules: [path.resolve( __dirname, 'src' ), 'node_modules'],

extensions: ['.js', '.vue', '.json', '.less', '.scss']

},

entry: {

// index: path.resolve( __dirname, 'src/pages/home/main.js' ),

index: './src/pages/home/main.js'

},

module: {

rules: [

{

test: /\.css$/,

exclude: /node_modules/,

use: [

'style-loader',

'css-loader'

]

},

// sass文件的处理

{

test: /\.(sa|sc|c)ss$/,

use: [

'css-loader',

'sass-loader'

],

},

{

test: /\.vue$/,

exclude:/node_modules/,

loader: 'vue-loader', /* 原来的'vue'改成'vue-loader' */

options: {

// vue-loa4der options go here

loaders:{

css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',

scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'

}

}

},

{

test: /\.js$/,

exclude: /node_modules/,

loader: 'babel-loader'

},

{

test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,

exclude: /(public)/,

use: [

{

loader: 'url-loader',

options: {

limit: 500, //小于50K的 都打包

name:'[hash:8].[name].[ext]',

// publicPath:"img/", //替换CSS引用的图片路径 可以替换成爱拍云上的路径

// outputPath:"../img/" //生成之后存放的路径

}

}

]

}

]

}

};

exports.baseConfig = baseConfig;

webpack.dev.js 文件

const path = require('path');

const merge = require('webpack-merge');

const base = require('./webpack.base.js');

const webpack = require('webpack');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = merge( base.baseConfig, {

output: {

filename: '[name].bundle.js',

path: __dirname + 'service/dist', //打包路径

publicPath:'dist/', // 用于处理静态资源引用地址问题

},

devtool: 'source-map',

devServer: {

host: '127.0.0.1',

compress: false,

port: 6600,

contentBase: './server',

hot: true

},

plugins: [

new CleanWebpackPlugin(),

// new HtmlWebpackPlugin({

// title: 'Output Management'

// }),

new VueLoaderPlugin(),

new webpack.HotModuleReplacementPlugin()

]

});

main.js 文件

// import Vue from 'vue/dist/vue.common.js';

import Vue from 'vue';

import router from './router.js';

import App from './modules/App'

Vue.config.productionTip = false;

//引入矢量图

// import "./assets/iconfont/iconfont.css"

//引入Vant插件

import Vant from 'vant'

import 'vant/lib/index.css'

Vue.use(Vant);

// let data = {

// Root: Root

// };

new Vue({

el: "#app",

router,

components: { App },

template: '',

beforeCreate: () =>{

// console.group('beforeCreate 创建前状态=============== ');

// console.log("%c%s", "color:red" , "el : ");

},

created: function () {

// console.group('created 创建完毕状态===============》');

},

beforeMount: function () {

// console.group('beforeMount 挂载前状态===============》');

},

mounted: function () {

// console.group('mounted 挂载结束状态===============》');

},

beforeUpdate: function () {

// console.group('beforeUpdate 更新前状态===============》');

},

updated: function () {

// console.group('updated 更新完成状态===============》');

},

beforeDestroy: function () {

// console.group('beforeDestroy 销毁前状态===============》');

},

destroyed: function () {

// console.group('destroyed 销毁完成状态===============》');

}

});