const webpack = require('webpack')
        const path = require('path')
        // 非webpack 自带插件 需要引入后使用
        const ExtractTextPlugin = require("extract-text-webpack-plugin")

        module.exports = {
          // context: 如果不通过path.resolve 配置入口访问路径 watch: true失效
          context: path.resolve('./app'),

          entry: {
            index: './index',
            mobile: './mobile',
            public: ['jquery', 'vue']
          },

          output: {
            // filename: 编译的文件名 仅用于命名每个文件
            // [name]: 多入口形式 入口文件名替换这里的name 
            // [chunkhash: num]: 入口文件的hash值 用于修改后清空缓存
            // filename: '[name].[chunkhash:3].js',
            filename: '[name].js',
            // 包存放的目录
            path: path.resolve('./scripts')
          },

          module: {
            rules: [
              {
                // 这里必须要添加 $ 否则匹配时 可能匹配到别的代码 有可能报错
                test: /\.(css)$/,
                use: ExtractTextPlugin.extract({
                  // cnpm install postcss-smart-import precss autoprefixer --save-dev
                  // postcss-loader: (Autoprefixer 需要用这个插件)自动补全 CSS前缀
                  use: ['css-loader']
                })
              },

              {
                // 这里必须要添加 $ 否则匹配时 可能匹配到别的代码 有可能报错
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                  // postcss-loader: 自动补全 CSS前缀 sass必须在postcss-loader前面 less不需要
                  use: ['css-loader', 'less-loader']
                })
              }
            ]
          },

          plugins: [
            new webpack.optimize.CommonsChunkPlugin({
              // 公共模块名称 有多个 使用数组
              // 匹配entry 入口文件名 相同的单独打包 其他模块统一抽取公共代码到commons.js中
              // css文件默认打包到一个公共CSS里 common.css
              // 公共文件也必须在在这里打包 否则公共文件会出现在其他文件里
              names: ['commons', 'public']
            }),

            // ExtractTextPlugin 对每个入口 chunk 都生成对应的一个文件 
            // 所以当你配置多个入口 chunk时 你必须使用 [name] [id] [contenthash]
            new ExtractTextPlugin({
              // filename: 提取后的css名称
              //    [name]: chunk 的文件名
              //    [contenthash: num]: 提取文件根据内容生成的哈
              // * 路径相对于 output里的path
              // filename: '../styles/[name].[contenthash:3].css'
              filename: '../styles/[name].css'
            })
          ],

          resolve: {
            // 创建import || require 引用文件路径的别名
            // 这里引用sub.js 可以是 import 'src/sub.js'
            alias: {
              // 绝对路径模式 需要使用 path.resolve
              src: path.resolve(__dirname, 'app/src/'),
              css: path.resolve(__dirname, 'css/'),
              // 相对路径模式 不适用 path.resolve || __dirname
              // xyz '文件路径' 直接饮用node_module里的文件
              // import vue from 'xyz/vue.js'
              xyz: 'vue/dist/'
            },
            // 默认扩展名 默认为 ['.js', '.json']
            extensions: ['.js', '.json', '.css']
          },
          
          watch: true
        }