[译]webpack官网文档 ：概念 -- 6.配置文件

原创翻译，转载请注明出处。 

原文地址：https://webpack.js.org/concepts/plugins/

 

 

你可能注意到极少有webpack配置文件看起来一模一样。这是因为webpack配置文件是一个能导出一个对象的JavaScript文件。Webpack根据它定义的属性来处理这个对象。

因为它是一个标准的Node.js CommonJS模块，所以你可以做一下事情：

• 通过require(…)来导入其他文件
• 通过require(…)来使用npm上的实用程序
• 使用JavaScript的控制流表达式，也就是?:操作符
• 对一些经常使用的值定义常量或者变量
• 作成并执行函数来生成一部分配置

可以适宜的使用这些特性。

 

你不应该做下面的事情。技术上可以使用它们，但是不推荐。

• 在使用webpack CLI时候，使用CLI参数（写你自己的CLI，或者使用–env）
• 输出一些不确定的值（调用webpack两次，应该产生同样的输出文件）
• 写一个很长的配置文件（可以把配置文件分割成几个文件）

 

下面的代码展示了怎样能使webpack配置文件既明了又丰富。

 

最简单的配置

webpack.config.js

 

var path =require('path');
 
module.exports ={
  entry:'./foo.js',
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'foo.bundle.js'
  }
};

多个目标

var path =require('path');
var webpack =require('webpack');
var webpackMerge =require('webpack-merge');
 
var baseConfig ={
  target:'async-node',
  entry:{
    entry:'./entry.js'
  },
  output:{
    path: path.resolve(__dirname,'dist'),
    filename:'[name].js'
  },
  plugins:[
    newwebpack.optimize.CommonsChunkPlugin({
      name:'inline',
      filename:'inline.js',
      minChunks:Infinity
    }),
    newwebpack.optimize.AggressiveSplittingPlugin({
        minSize:5000,
        maxSize:10000
    }),
  ]
};
 
let targets =['web','webworker','node','async-node','node-webkit','electron-main'].map((target)=>{
  let base =webpackMerge(baseConfig,{
    target: target,
    output:{
      path: path.resolve(__dirname,'dist/'+ target),
      filename:'[name].'+ target +'.js'
    }
  });
  return base;
});
 
module.exports = targets;

使用TypeScript

下面的例子我们使用TypeScript来作成一个类，Angluar-cli通过它可以生成配置文件。

 

webpack.config.ts

 

import* as webpackMerge from 'webpack-merge';
import{ CliConfig } from './config';
import{
  getWebpackCommonConfig,
  getWebpackDevConfigPartial,
  getWebpackProdConfigPartial,
  getWebpackMobileConfigPartial,
  getWebpackMobileProdConfigPartial
} from './';
 
exportclassNgCliWebpackConfig{
  // TODO: When webpack2 types are finished let's replace all these any types
  // so this is more maintainable in the future for devs
  public config:any;
  private webpackDevConfigPartial:any;
  private webpackProdConfigPartial:any;
  private webpackBaseConfig:any;
  private webpackMobileConfigPartial:any;
  private webpackMobileProdConfigPartial:any;
 
  constructor(public ngCliProject:any,public target:string,public environment:string, outputDir?:string){
    const config: CliConfig = CliConfig.fromProject();
    const appConfig = config.config.apps[0];
 
    appConfig.outDir = outputDir || appConfig.outDir;
 
    this.webpackBaseConfig =getWebpackCommonConfig(this.ngCliProject.root, environment, appConfig);
    this.webpackDevConfigPartial =getWebpackDevConfigPartial(this.ngCliProject.root, appConfig);
    this.webpackProdConfigPartial =getWebpackProdConfigPartial(this.ngCliProject.root, appConfig);
 
    if(appConfig.mobile){
      this.webpackMobileConfigPartial =getWebpackMobileConfigPartial(this.ngCliProject.root, appConfig);
      this.webpackMobileProdConfigPartial =getWebpackMobileProdConfigPartial(this.ngCliProject.root, appConfig);
      this.webpackBaseConfig =webpackMerge(this.webpackBaseConfig,this.webpackMobileConfigPartial);
      this.webpackProdConfigPartial =webpackMerge(this.webpackProdConfigPartial,this.webpackMobileProdConfigPartial);
    }
 
    this.generateConfig();
  }
 
  generateConfig():void{
    switch(this.target){
      case"development":
        this.config =webpackMerge(this.webpackBaseConfig,this.webpackDevConfigPartial);
        break;
      case"production":
        this.config =webpackMerge(this.webpackBaseConfig,this.webpackProdConfigPartial);
        break;
      default:
        thrownewError("Invalid build target. Only 'development' and 'production' are available.");
        break;
    }
  }
}

使用JSX

下面的例子使用JSX（React JavaScript Markup）和Babel来作成一个webpack能理解的JSON配置文件。

import h from'jsxobj';
 
// example of an imported plugin
const CustomPlugin = config =>({
  ...config,
  name:'custom-plugin'
});
 
exportdefault(
  <webpack target="web" watch>
    <entry path="src/index.js"/>
    <resolve>
      <alias {...{
        react:'preact-compat',
        'react-dom':'preact-compat'
      }}/>
    </resolve>
    <plugins>
      <uglify-js opts={{
        compression:true,
        mangle:false
      }}/>
      <CustomPlugin foo="bar"/>
    </plugins>
  </webpack>
);

 

-- End --