/**
 * webpack的基本打包配置有: entry、output、mode 三項即可
 */
const path = require('path');
module.exports = {
    entry:'./src/main.js',//配置打包入口文件
    output:{//輸出配置
        path: path.join(__dirname,'dist'),//配置輸出文件的保存位置
        filename:'js/bundle.js',//打包后的文件名
        clean: true,//打包前是否將打包的輸出目錄清空
    },
    mode:'development'//以開發(fā)模式打包
}

"scripts": {
"build": "webpack"
}

const { resolve } = require('path'); // node 內(nèi)置核心模塊，用來處理路徑問題。
module.exports = { 
     mode: 'development' //開發(fā)環(huán)境   production  //生產(chǎn)環(huán)境
 	 entry: './src/js/index.js', //  單入口文件
      // entry: {                     //多入口  會打包雙方重復文件
      //   index: './src/index.js',
      //   another: './src/another-module.js'
      // },
      // entry: {                     //多入口   lodash不會重復打包
      //   index: { import: './src/index.js', dependOn: 'shared' },
      //   another: { import: './src/another-module.js', dependOn: 'shared' },
      //   shared: 'lodash' //不會重復打包
      // },
	 output: { // 輸出配置
    	 //filename: './built.js', // 輸出文件名 
         path: resolve(__dirname, 'dist'),  //打包后的輸出位置 webpack當前目錄下的  dist
    //contenthash根據(jù)內(nèi)容變化生成文件名 不變不修改名字會用緩存
        filename: 'scripts/[name].[contenthash].js', //'bundle.js',      //打包后的文件名  多個入口不能寫固定一個名字
        clean: true,   //打包后清除上次內(nèi)容
        assetModuleFilename: 'images/[contenthash][ext]', //靜態(tài)文件打包地址/文件名
        publicPath: ''
	 },
    // devtool: 'inline-source-map',  //打包后找到真實源代碼位置
     devServer: {            //實時更新
        static: './dist'， 
        hot: true,   //開啟熱更新
        compress: true, // 啟動gzip壓縮
        port: 3000, // 端口號
        open: true // 自動打開瀏覽器
        proxy: {   //代理
          '/api': {
            target: 'http://localhost:4000',
            changeOrigin: true,
            ws: true,
            pathRewrite: {
              '^/api': ''
            }
      }
    }
  },
 module: {
    rules: [
      // 詳細loader配置
      // 不同文件必須配置不同loader處理
     {
        test: /\.(jpg|gif|png)/,
        use: 'url-loader',
        option: {// 圖片大小小于8kb，就會被base64處理// 優(yōu)點: 減少請求數(shù)量（減輕服務(wù)器壓力）// 缺點：圖片體積會更大（文件請求速度更慢）
          esModule: true,
          limint: 5 * 1024,    //圖片是否轉(zhuǎn)base64
          name: '[hash: 10].[ext]'  //圖片命名
        }
      },
      {
        test: /\.(css|less)$/,
        // use: ['style-loader', 'css-loader', 'less-loader']  //從后往前編譯 先解析在編譯  行內(nèi)樣式
        use: ['MinCssExtractPlugin.loader', 'css-loader', 'less-loader'], //把css文件打包到一個css 用link引入到html中
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不打包指定路徑下的js文件
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime'  //為promise解決
              ]
            ]
          }
        }
      }，
 
    ]
  },
 plugins: [
webpack.HotModuleReplacementPlugin(), //熱更新
    new HtmlWebpackPlugin({
      template: './index.html', //要打包的html
      filename: 'app.html',  //html打包后的名字
      inject: 'body',   //script 標簽生成地址
      collapseWhitespace: true,  //壓縮移除空格
      removeComments: true,  //壓縮移除注釋
    }),
    new MinCssExtractPlugin({   //把css文件打包到一個新css 用link引入到html中 可修改地址/文件名
      filename: 'styles/[contenthash].css'
    })
  ],
 optimization: {
    minimizer: [
      new CssMinimizerWebpackPlugin()  //還需將mode改為production  會壓縮css代碼
    ],
    splitChunks: {
      // chunks: 'all',// 公共文件 lodash不會重復打包
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chuns: 'all'
        }
      }
    }
  }
};