配置实例2

var config = require('../config');
var path = require('path')
const webpack = require('webpack');

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  /*
  所有模块的入口，webpack 从入口开始递归解析出所有依赖的模块
  */
  entry: {
    app: ["babel-polyfill", "./src/index.js"]
  },
  output: {
    /*
  将入口所依赖的所有模块打包成一个文件bundle.js输出
    */
    filename: "bundle.js",
    path: __dirname + "/dist",
    publicPath: process.env.BUILD_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  devtool: "source-map",
  /*1.resolve 配置webpack 如何寻找模块所对应地文件，指明存放第三方模块的绝对路径,以减少寻找，配置如下*/
  resolve: {
    /*2.
  1.后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
  2.频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
  3.在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。
    */
    extensions: [".vue", ".js", ".json"],
    alias: {
      'com': resolve('src/components'),
      'mod': resolve('src/modules'),
      'util': resolve('src/util'),
      '@': resolve('src')
    }
  },
  // externals: {
  //     'vue': 'Vue',
  //     'vue-router': 'VueRouter',
  //     'vuex':'Vuex',
  //     'vant': 'vant',
  //     'axios': 'axios',
  // },
  module: {
    /*rules
    loader 配置模块的读取和 解析规则规则，通常用来配置Loader,类型为数组
  
      test:用正则去匹配要用该 loader 转换的 css 文件
      实例：test: /\.css$/,
  
      exclude: 不用解析
      include: 要解析的范围
      use: use是每一个rule的属性，指定要用什么loader
      noParse:忽略对部分没采用模块化的文件的递归解析和处理。提高构建性能
        例如：一些库如jq,chartJS大而没采用模块化标准让webpack 解析耗时又没意义：
  
      // 配置模块相关 start
      module: {
        rules: [ // 配置 Loader
          {  
            test: /\.jsx?$/, // 正则匹配命中要使用 Loader 的文件
            include: [ // 只会命中这里面的文件
              path.resolve(__dirname, 'app')
            ],
            exclude: [ // 忽略这里面的文件
              path.resolve(__dirname, 'app/demo-files')
            ],
            use: [ // 使用那些 Loader，有先后次序，从后往前执行
              'style-loader', // 直接使用 Loader 的名称
              {
                loader: 'css-loader',      
                options: { // 给 html-loader 传一些参数
                }
              }
            ]
          },
        ],
        noParse: [ // 不用解析和处理的模块
          /special-library\.js$/  // 用正则匹配
        ],
      },
      // 配置模块相关 end
      */
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: [resolve('src')]
      },
      // {
      //     test: /\.ts$/,
      //     loader: 'ts-loader',
      //     exclude: /node_modules/,
      //     options: {
      //       transpileOnly: true,
      //       appendTsSuffixTo: [/\.vue$/]
      //     }
      // },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      },
      {
        test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
        loader: 'url-loader?limit=1024'
      }
    ]
  },
  /*
  plugin 是用来扩展webpack 功能的，通过在构建流程里租入钩子实现，它为webpack带来很大灵活性
  例子：通过plugin 将注入bundle.js 文件里的css 提取到单独的文件中：
      new ExtractTextPlugin({
        // 从 .js 文件中提取出来的 .css 文件的名称
        filename: `[name]_[contenthash:8].css`,
      }),
  */
  plugins: [],
};