Webpack核心概念之Output输出

Webpack的核心,它是一款现代javaScript应用程序的静态模块打包管理器。webpack运行时,会自动构建映射到项目所需的每一个模块,并生成一个或多个bundles文件的关系图。从版本4开始,webpack不再要求通过配置文件进行项目打包,然而却可以难以置信地更好的适配您的需求

attachments-2018-03-9MDlTgOS5aa74ab46b850.png

作者:梁雁明

著权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Output

output 配置选项指导webpack将编译后的文件写入到磁盘上。请注意当是多输入点时只能配置一个output

Usage

在你的webpack配置文件output 属性的最小要求是,设置它的值包含下面两个事情。:

·      filename 入文件文件名

·      path 绝对录标识出目

webpack.config.js

module.exports ={

  output:{

    filename:'bundle.js',

    path:'/home/proj/public/assets'

  }

};

上面配置会在/home/proj/public/assets目录中会输出单一的 bundle.js 文件。

Multiple Entry Points入点

如果你的配置生成多于一个"chunk" (和多输入点或使用像CommonsChunkPlugin的插件时), 你需要使用substitutions以确保每个文件都有唯一的名称.

module.exports ={

  entry:{

    app:'./src/app.js',

    search:'./src/search.js'

  },

  output:{

    filename:'[name].js',

    path:__dirname +'/dist'

  }

};

 

// writes to disk: ./dist/app.js, ./dist/search.js

Advanced级进阶

这里是一个使用CDNhashes用于资产的更加复杂的例子:

config.js

module.exports ={

  //...

  output:{

    path:'/home/proj/cdn/assets/[hash]',

    publicPath:'http://cdn.example.com/assets/[hash]/'

  }

};

万一当输入文件最后的 publicPath 在编译时不明确,可以在输入点文件被留空且被运行时动态设定。如果你不明白编译时的publicPath你可以产生它并设置__webpack_public_path__在你的输入点上

__webpack_public_path__ =myRuntimePublicPath;

 

// rest of your application entry

 

 

Mode模型

提供mode 配置选择告诉webpack相机地使用它内健的优化器.

string

Usage

在配置文件中提供 mode 选项:

module.exports ={
  mode:'production'
};

或传递到CLI 参数中:

webpack --mode=production

如果没有设置, webpack设置production 作为 mode的默认值mode支持的值有:

Option       Description

Development         Provides process.env.NODE_ENV with value development. Enables NamedChunksPlugin and NamedModulesPlugin.

Production            Provides process.env.NODE_ENV withvalue production. Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin.

None                                          Opts out of any default optimization options

Please remember that setting NODE_ENV doesn't automatically set mode. 

Mode: development

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

Mode: production

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

Mode: none

// webpack.custom.config.js
module.exports = {
+  mode: 'none',
-  plugins: [
-  ]
}

如果你想在webpack.config.js根据模型变量改变应用行为,必须导出函数而不是一个对象:

var config ={
  entry:'./app.js'
  //...
};

 

module.exports =(env, argv)=>{

 

  if(argv.mode ==='development'){
    config.devtool ='source-map';
  }

 

  if(argv.mode ==='production'){
    //...
  }
  return config;
};

文章发布只为分享区块链技术内容,版权归原作者所有,观点仅代表作者本人,绝不代表区块链兄弟赞同其观点或证实其描述。

attachments-2018-02-kL1zBfXx5a7ffd0b78798.jpg

  • 发表于 2018-06-13 18:01
  • 阅读 ( 596 )
  • 分类:以太坊

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
不写代码的码农
梁雁明

区块链研究员

21 篇文章

作家榜 »

  1. 社区运营-小以 442 文章
  2. 社区运营-小链 245 文章
  3. 于中阳Mercina-zy 78 文章
  4. 涂晶 72 文章
  5. 李晓琼 45 文章
  6. 兄弟连区块链培训 41 文章
  7. 吴寿鹤 36 文章
  8. John-smith 26 文章