webpack配置文档

webpack核心配置

entry

单入口 string
多入口 object

  config.entry = {
    a:'src/a.js',
    b:'src/b.js'
  }
  config.entry = './a/index.js'

output

与entry对应用于输出配置

config.output = {
  filename:'[name].[chunkHash].js',
  path:path.resolve(__dirname,'dist),
  chunkName:'[name].[chunkhash].js',
  publicPath:'/',
}

plugins

config.plugins = [
  new HtmlWepbackPlugin({
    filename:'index.html',
    temlate:'./public/index.html',
    inject:true,
    chunk:['app']
  }),
  new CopyWebpackPlugin([
    {
      from:path.resolve(__dirname,'static'),
      to:path.resolve(__dirname,'dist/static')
    }
  ]),
  new CleanWebpackPlugin(),
  new webpack.DefinePlugin({
    ENV:JSON.stringify('production')
  }),
  <!-- const VueLoaderPlugin = require('vue-loader/lib/plugin'); -->
  new VueLoaderPlugin(),
  new webpack.HashedModuleIdsPlugin({
  }),
  new CompressionWebpackPlugin({
    filename: '[path].br[query]',
    algorithm: 'gzip', // 使用gzip压缩
    test: /\.(js|css)$/,
    threshold: 10240,
    minRatio: 0.8,
    // deleteOriginalAssets: false,
  })
]

module

1.file-loader

2.base-loader

config.module = {
  rules:[{
    test:/\.css$/,
    use:[{
      loader:'css-loader'
    },{
      loader:'style-loader'
    }]
  },
  {
    test:/\.js|jsx$/,
    use:[{
      loader:'babel-loader'
    }]
  },
  {
    test:/\.jpg|png|gif$/,
    use:['file-loader']
  },
  {
    test:/\.vue$/,
    use:[{
      loader:'vue-loader',
      option:{
        name:'[name].[contenthash].[ext]',
        outputPath:'static/assets/',
        publicPath:'static/assets/',
      }
    }]
  }
  ]
}

devServer

config.devServer = {
  contentBase:'./public/index.html',
  hot:true,
  compress:true,
  port:'9000'
}

.babelrc

{
  "preset":["@babel/preset-env","@babel/preset-react"],
  "plugins":[
    ["babel-plugin-transform-remove-console",{
      "exclude":["error","warn"]
    }]
  ]
}

watch & watchOptions

  watch: true,
  // 自定义监视模式
  watchOptions: {
    // 排除监听
    ignored: /node_modules/,
    // 监听到变化发生后，延迟 300ms（默认） 再去执行动作，
    // 防止文件更新太快导致重新编译频率太高
    aggregateTimeout: 300,
    // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
    // 默认 1000ms 询问一次
    poll: 1000
  }

webpack-target

const publicHtml = './public/index.html';
const path = require('path');
const webpack = require('webpack');
const HtmlWepbackPlguin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const configA = {
  target:'web',
  entry:{
    a:'./src/test/a.js',
    b:'./src/test/b.js'
  },
  output:{
    filename:'[name].js',
    path:path.resolve(__dirname,'testDist')
  },
  devServer:{
    host:'127.0.0.1',
    port:'5555',
    contentBase:publicHtml
  },
  plugins:[
    // new CleanWebpackPlugin(),
    new HtmlWepbackPlguin({
      filename:'index.html',
      temlate:publicHtml,
      inject:true
    }),
    new webpack.DefinePlugin({
      env:JSON.stringify(process.env)
    })
  ],
  // optimization: {
  //   runtimeChunk: 'single',
  //   splitChunks: {
  //     chunks: 'all',
  //     maxInitialRequests: Infinity,
  //     minSize: 0,
  //     cacheGroups: {
  //       vendor: {
  //         test: /[\\/]node_modules[\\/]/,
  //         name(module) {
  //           // 获取第三方包名
  //           const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
  //           // npm 软件包名称是 URL 安全的，但是某些服务器不喜欢@符号
  //           return `npm.${packageName.replace('@', '')}`;
  //         },
  //       },
  //     },
  //   },
  // },
  watch: true,
  // 自定义监视模式
  watchOptions: {
    // 排除监听
    ignored: /node_modules/,
    // 监听到变化发生后，延迟 300ms（默认） 再去执行动作，
    // 防止文件更新太快导致重新编译频率太高
    aggregateTimeout: 300,
    // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
    // 默认 1000ms 询问一次
    poll: 1000
  }
}
const configB = {
  target:'node',
  entry:{
    a:'./src/test/a.js',
    b:'./src/test/b.js'
  },
  output:{
    filename:'[name].node.js',
    path:path.resolve(__dirname,'testDist')
  }
}
module.exports = [configA,configB]