webpack系列-配置篇

watch

监听文件变化来进行webpack打包

    watch:true,
    watchOptions:{ // 监控选项
        poll:1000, // 每秒问我1000次
        aggregateTimeout:500, // 防抖
        ignored:/node_modules/ // 不监控的文件
        
    }

多页

    module.exports = {
        entry:{
            index:'./src/index.js',
            other:'./src/other.js'
        },
        output:{
            filename:[name].[hash:8].js,
            path:path.resolve('./dist')
        },
        plugins:[
            new HtmlWebpackPlugin({
                template:'./src/index.html',
                filename:'index.html',
                chunks:['index']
            }),
            new HtmlWebpackPlugin({
                template:'./src/index.html',
                filename:'other.html',
                chunks:['other']
            })
        ]
    }

resolve

解析第三方模块，定义别名、查找后缀等配置。

    module.exports = {
        resolve:{
             modules: [path.resolve('node_modules')], // 第三方模块的解析文件夹
            //mainFiles:['a.js','index.js'], // 入口文件的配置
            //mainFields:['style','main'],// 入口字段的配置
            alias: { // 别名
              'bootstrap': 'bootstrap/dist/css/bootstrap.css'
            },
            // 配置我们的后缀
            extensions: ['.js', '.json', '.css']
        }
    }

noParse

如果当前模块没有依赖项了，可以配置此项来不在进行解析

    module:{
        noParse:/jquery/ // 如果确定没有依赖的可以加载这里
    }

IgnorePlugin

忽略插件的某些包

    // 如果 发现moment中引入了 locale那就忽略掉
    new webpack.IgnorePlugin(/\.\/locale/,/moment/),

DefinePlugin

定义一些常量

    new webpack.DefinePlugin({
      // 定义的变量 需要用json.stringfy包裹
      DEV:JSON.stringify('development'), // console.log("development"),
      EXPRESSION:'1+1',
      FLAG:'true' ,//console.log(true)
    }),

webpack-merge

合并文件，开发环境和生产环境分开配置。

    let base = require('./webpack.base.js');
    let merge = require('webpack-merge');
    let dev = {
      mode:'development'
      
    }
    module.exports = merge(base, dev);

webpack-dev-middleware

服务端打包

    let express = require('express');

    let webpack = require('webpack')
    let config = require('./webpack.config.js');
    let compiler = webpack(config); // 产生编译
    // 在后端中 引入webpack 启动服务
    let middle = require('webpack-dev-middleware');
    
    let app = express();
    app.use(middle(compiler));
    app.get('/api/user',async (req,res)=>{
      res.json({name:'zfpx'});
    })
    
    app.listen(3000);

cleanWebpackPlugin、copyWebpackPlugin、BannerPlugin

清空文件、拷贝文件、文件签名

    new CleanWebpackPlugin(['./dist']),
    new CopyWebpackPlugin([{ // 拷贝静态资源插件
    from:'./assets',
    to:'./'
    }]),
    new webpack.BannerPlugin('make by xx in 2019'),

proxy代理配置、before钩子mock假数据

    //可以mock 自己的数据
    before(app){ // 默认webpack-dev-server 启动的时候 会调用这样的before钩子 , app 是 我们 express()
      app.get('/api/user',(req,res)=>{
        res.json({name:'jw'});
      })
    }
    //前端 会用nginx
    proxy:{ // 只对开发的时候有效
      '/api':{
        target:'http://localhost:3000',
        pathRewrite:{
          '/api':''
        }
      }
    }

devtool

source-map 生成一个源文件的映射，反映报错信息。
cheap-module-source-map 没有列信息
eval-source-map 会打包在当前文件中
cheap-module-eval-source-map 文件中没有列信息

    devtool:'source-map', // 告诉webpack 生成一个map，会标识源码中哪行哪列报错了
  devtool:'cheap-module-eval-source-map', // 是一个在文件中的source-map  没有列
  devtool:'eval-source-map', // 当前打包的js中
  devtool:'cheap-module-source-map'
  watch:true, // 监听打包 babel --watch
  watchOptions:{ // 监控的选项
    poll:1000, // 以秒为单位 轮询
    // 防抖 只要不停的触发事件只执行最后一次 节流 每隔多少ms 触发一次
    aggregateTimeout:2000,
    ignored:/node_modules/
  },