为了账号安全,请及时绑定邮箱和手机立即绑定

webpack2.2 概念部分总结分析

标签:
前端工具
introduce
  • concepts

    webpack是现代js应用的模块打包器,它是非常可配置,但要明确以下四个概念。

    1. Entry
      webpack构建一个你应用程序依赖的图,起点便是所谓的erntry point。它告诉wenpack从哪开始并且
      按照依赖图去知道什么要打包。可以将此比作 contextual root or the first file to kick off your app.。
      The simplest example:
      //webpack.config.js  
      module.exports={
      entry:'./path/to/my/entry/file.js'
      };
    2. Output
      一旦打包好了资源,依然需要告诉webpack哪里打包应用程序,output属性告诉webpack如何处理打包过的代码。
      The simplest example:
      //webpack.config.js  
      module.exports={
          entry:'./path/to/my/entry/file.js',
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'my-first-webpack.bundle.js'
            }
      };

      示例中用output.filename和output.path属性告诉webpack包名和将之emit to哪。

    3. Loaders
      目的在于将所有项目中的资源作为webpack而非浏览器关心的。webpack眼中一切(.css,.hmtl,.scss,.jpg,etc)
      皆模块。但其只知道js,而Loaders在webpack中将这些文件转化成依赖图中的模块。有两个目的在高水准要求上:
      a.确定什么文件该被相应loader转换(test),b:转换相应文件以加入到依赖图(use)。
      
      const path = require('path');

    const config = {
    entry: './path/to/my/entry/file.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
    },
    module: {
    rules: [
    {test: /.(js|jsx)$/, use: 'babel-loader'}
    ]
    }
    };
    module.exports = config;

    4. Plugins
    因loaders仅基于每个文件转换,故plugins是最常用的对打包模块的 "compilations" or "chunks"执行操作和自定义功能等。
    要用plugin需要用require()且将其放入plugins数组。多数plugins可按需自定义
    因可在配置中按不同目的多次使用,此时需要用new来构建它的一个实例。

    const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
    const webpack = require('webpack'); //to access built-in plugins
    const path = require('path');

    const config = {
    entry: './path/to/my/entry/file.js',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
    },
    module: {
    rules: [
    {test: /.(js|jsx)$/, use: 'babel-loader'}
    ]
    },
    plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
    ]
    };

    module.exports = config;

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
7244
获赞与收藏
3476

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消