zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    OO第三单元总结
    oo第二单元总结
    oo第一单元总结
    OO助教工作总结
    当QSY遇上XL尺码的小黄衫
    终点亦是起点
    敏捷开发规范化
    Beta阶段性总结
    需求存在,功能存在——Alpha阶段性总结
    Gitlab Burndown Chart
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/8745554.html
Copyright © 2011-2022 走看看