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

原文地址:https://www.cnblogs.com/xiaofenguo/p/8745554.html