webpack配置文件

1. 因为基于nodejs，所以是个CommonJs模块，可require引入其他npm模块（path、fs等文件系统）、插件进行配合,
2. 配置文件可根据环境做js的打包module的拆分（dev、test、dist等环境去引入）

列出一些常用配置，具体的可以到https://webpack.js.org/configuration/ 查看

{

• mode
• targert
• entry
• output
• module
• resolve
• plugins
• optimization 详细可见代码拆分
• devServer 详细可见代码拆分
• devTools

• context

  }

module.exports = {
    //这里提供打包的默认规则，并且会设置对应的procees.env.NODE_ENV
    //production，会ugly
     mode: 'development|production' ,

     target: 'web|node', //默认web,还有很多其他

     //配置下入口文件，即可从入口区解析里面的内容
     entry: {
       'page1': './src/page1.js'
        [chunkName]: 'chunkEntry'
     },

     output: {
      // entry chunks（包含runtime的chunk）文件名模板（可用[name]/[chunkhash]）
       filename: '[name].[chunkhash].bundle.js' ,
       //additionalchunks文件名
       chunkFilename: '[name].[chunkhash].chunk.js',

       // target directory打包结果的输出 目录（必须是绝对路径，这里require('path')）
       path: path.resolve(__dirname, "dist"), // string

        // 相对于html的web页面的路径加载地址（异步import的时候尤为重要）the url to the output directory  resolved relative to the HTML page
       publicPath: "/assets | https://cdn.xxxx" //本地调试、和发布环境的时候注意区别于这里的不同
     }

     //===========webpack4其实只有以上配置即可完成输入输出了=============

     //webpack只识别js，这里可以新增一些模块处理方法和插件（可取处理jsx css sass png等模块）
     module: {

      rules: [ // 模块规则（配置 loader、解析器等选项），数组【{Rule对象1} {Rule对象2}】
        {
          // 三种匹配条件（value :正则表达式 | 字符串（绝对路径））
          test: /\.js$|\.jsx$/, //webpack本来就会处理js,可以配置babel-loader新增对jsx es6的转化支持
          include: [ //这里可接受数组（test 和 include 具有相同的作用）
            path.resolve(__dirname, "react/src")
          ],
          // 还有exclude： （优先于 test 和 include）
          // 官方推荐用法1.只在 test 和 文件名匹配 中使用正则表达式 2.在 include 和 exclude 中使用绝对路径数组 3. 更倾向于使用 include        


          use:{ //可用对象或者数组（多个loader去解析）
            loader: 'babel-loader',
            options: {//可设置loader的参数，babel可放在.babelrc
                  presets: [['env', {module: false}], 'react'],
                  plugins: [] //babel有babel插件区别于webpack插件
            }
        },


         {
                test: /\.css$/,
                use: ['style-loader',
                      'css-loader']
                //Rule对象还有很多参数，如
                //enforce: "pre" || "post",

         }
      ]
   }
   //module.exports.module：-------------end-----------------


   //module是模块的处理方法，resolve请求模块前的一些处理（例如请求什么拓展名，用别名之类的之类的）
   resolve:{
     // 使用的扩展名
     extensions: [".js", ".json", ".jsx", ".css"],

     //模块别名列表
     alias: {      
      components: `${srcPath}/components/`    
     }
   }


   //一个plugins插件对象数组
   plugins: [
       new Visualizer({filename: '../stat/webpack-stats.html'}),
       new webpack.HotModuleReplacementPlugin()
   ]

   //进行code split (webpack4开始),
   optimization: {
        runtimeChunk: {name: 'runtime'},
        splitChunks: {
            //...
        }
   }



   //-----------调试过程用到的工具
   //devServer自动更新服务，可以配合hotModule进行热更新
   //npm run server(webpack-dev-server --open)
   devServer: { 
        // contentBase: './dist'
        contentBase: './src/views/',
        // publicPath: 'http://localhost:8080/dist' //这是模块热替换要绝对路径
        publicPath: '/dist/', //publicPath 是绝对路径/开头和结尾
        port: 9090,
        hot: true, //在devServer中启用后需在plugins中添加HotModuleReplacementPlugin, 否则启动需要加上--hot

   }

  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  devtools: 'inline-source-map | source-map' //非常多的选项

  // webpack 的主目录，entry 和 module.rules.loader 选项的解析
  context: __dirname, // string（绝对路径！）





}