webpack.config.js

const path = require('path');
const webpack = require('webpack');
//导入组件：映射index.html
const Htmlwebpackplugin = require('html-webpack-plugin')
//导入插件：压缩index.html
const Uglifyjswebpackplugin = require('uglifyjs-webpack-plugin')
module.exports = {
 entry: './src/js/index.js',
 output: {
    //path路径必须是绝对路径 可以通过node配置动态获取路径(路径不要写死)
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    //由于我们用了html-webpack-plugin插件（会映射一个index.html到dist文件下）所以不需要这个配置了
    //配置的这个url路径必须和index.html同级目录
    /* publicPath: 'dist/' */
  },
  //该文件内 配置loader
   module: {
    rules: [
        //webpack打包css 需要配置css对应的loader
      {
        test: /\.css$/,
        //use读取的时候是从右往左读的,css-loader只负责传递数据 style-loader负责把样式加载到dom里面
        use: ['style-loader', 'css-loader'],
      },
      //webpack打包url  需要配置背景图片url 对应的loader
      //图片是二进制文件 然后有这个loader工具后打包后就成了base64的样子了。base支持2进制.
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              //设置背景图片kb小于 8192
              //设置存储的方式：imges文件夹下 图片名 保留8位hash值 保留后缀名
              //如果小于8192k的话 会把图片转化为base64字符串形式（当作数据传输）
              limit: 8192,
              //如果大于的话 把图片传输到images文件夹下。(当作文件传输)
              name:'images/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      //把ES6语法打包为ES5语法
      //相关命令//cnpm i babel-loader@7 babel-core babel-preset-es2015 --save--dev
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      //配置 vue类型的文件
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  //让vue使用vue.esm.js这个版本(这个版本支持template模板组件。)
  resolve:{
    alias:{
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  //webpack的插件
  plugins:[
    //声明版权
    new webpack.BannerPlugin('最终版权归Mr_cui所有'),
    //映射index.html
    new Htmlwebpackplugin({
      template: 'index.html'
    }),
    //压缩index.html （压缩会去空格，去注释。）开发阶段不需要
    /* new Uglifyjswebpackplugin() */
  ],
  //webpack搭建本地服务器 服务的是dist 生产阶段不需要（过后删）
  devServer:{
    contentBase: './dist',
    //实时监听
    inline: true
    //port:端口号 （指定泡在某个端口）
  }
}