webpack.config.js配置（development&production）

development.config.js

//引入html-webpack-plugin模块，目的是生成index.html模板
const HtmlWebpackPlugin=require('html-webpack-plugin');
//引入vue-loader中的plugin，才能成功编译.vue文件
const VueLoaderPlugin=require('vue-loader/lib/plugin');

module.exports={
 //模式为开发模式
  mode: 'development',
  //出口
  output: {
 	/*
	不需要输出，因为开发模式，编译的bundle.js文件输出内存里
	output: path.resolve(__dirname,'dest');
	*/
    filename: 'bundle.js'
  },
  //开启调试定位,若文件编译发生错误，定位到具体哪个文件
  devtool: 'source-map',
  
  plugins: [
  //以index.html为模板编译Html,避免每次都在index.html源文件中引入bundle.js文件
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    //调用Vue中的plugin，以便成功编译 .vue文件
    new VueLoaderPlugin()
  ]
};

production.config.js

const path=require('path');

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

module.exports={
  mode: 'production',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'bundle.min.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new VueLoaderPlugin()
  ]
};

webpack.config.js文件配置

//引进path模块，获取绝对路径
const path=require('path');

module.exports=function (env, argv){
	//根据env中的属性获取不同配置
  env=env||{};

  return {
  	//入口
    entry: './src/index',
    //模块
    module: {
    	webpack编译标准
      rules: [
      	//css-loader：在Js文件中引入css文件，vue-style-loader：将.vue中css样式和全局css样式糅合，然后将css应用到标签
        {test: /\.css$/i, use: ['vue-style-loader', 'css-loader']},
        //file-loader：编译框架中各种文件
        {test: /\.(eot|svg|ttf|woff|woff2)$/i, use: 'file-loader'},
        //编译.vue文件
        {test: /\.vue$/i, use: 'vue-loader'},
        //编译 less文件
        {test: /\.less$/i, use: ['vue-style-loader', 'css-loader', 'less-loader']}
      ]
    },
    resolve: {
     //别名
      alias: {
        'vue': 'vue/dist/vue.esm',
        '@': path.resolve(__dirname, 'src/components')
      }
    },
    ...env.development?require('./config/webpack.development'):require('./config/webpack.production')
  };
};

pack.json文件配置

{
  "name": "component",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
  	//webpack-dev-server ：开启热更新，--env.development：设置env中的development --open:自动打开浏览器
    "start": "webpack-dev-server --env.development --open",
    "build": "webpack --env.production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.17",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.4.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "vue-axios": "^2.1.4",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2"
  }
}