• 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

  • 相关阅读:
    javascript 原型和构造函数
    react native与原生的交互
    项目中git的用法
    web页面的回流,认识与避免
    js 中的算法题,那些经常看到的
    js中this的四种调用模式
    JS面向对象的几种写法
    模块化加载require.js
    es6新语法
    vue组件化开发
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/8745554.html
Copyright © 2020-2023  润新知