• webpack配置


    path 模块是Node内置的模块,__dirname是一个全局变量,代表当前路径,可以防止不同的操作系统之间文件路径问题。

    entry和output

    entry可以是单个字符串,入口文件是单个文件,output对应也是单个文件

    entry是数组,说明入口文件有多个,多个入口文件对应一个输出文件output

    entry是对象,有多个chunk,就会对应多个output文件,不然打包文件会互相覆盖。(当chunk是多个时,就可以使用占位符,使输出的文件唯一)

    自动生成html文件

    html-webpack-plugin

    module.exports={

      plugins:[
      new htmlWebpackPlugin({template:'index.html'});//自动生成html文件index.html 并指定webpack.config.js同一目录下的index.html为模板

      ]

    };

    默认参数context:上下文,默认是配置文件所在的目录。

    参数:

    指定生成文件的名称

    1 filename:'index-[hash].html',(一般直接指定为index.html,否则每次打包都生成不同的文件,会生成很多冗余文件)

    指定打包后的js文件插入的位置:

    2 inject:'head'//生成的js文件放在head标签中,默认在body标签中

    3 title:'this is a demo'

    设置的title中在index.html模板中要获取:

    <title><%= htmlWebpack.options.title%></title>

    4 minify:{} 对生成的html进行压缩

    5 chunks:[]

    对于多页面应用程序,设置当前页面引入的js文件

    手动指定比较麻烦,可以指定

    excludeChunkes:[]:指定除了那些chunk,别的chunk都引入

    output参数:

    publicPath:''

    是一个占位符,例如项目上线,js文件是在cdn上放着,就可以设置值为http://sdn.com/,生成的index.html中引入的js都会以http://sdn.com/开头

    webpack loaders

  • 相关阅读:
    Spring Boot 入门
    门罗币(MONERO)钱包生成教程
    数据库 一对多,多对多 表设计
    使用nginx+lua脚本读写redis缓存
    在Spring MVC中使用注解的方式校验RequestParams
    MySQL命名、设计及使用规范《MySQL命名、设计及使用规范》
    Mycat分表分库
    Go在Ubuntu 14.04 64位上的安装过程
    Android获取设备屏幕宽高像素值的两个方法
    php_curl.dll libssh2.dll 始终无法加载的原因 及解决办法
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/8745554.html
Copyright © 2020-2023  润新知