webpack之index.html模板配置

webpack之Index.html模板配置

1、单页面环境搭建

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode:'development',
 plugin: [
  new HtmlWebpackPlugin({
   title:'多页面应用'，
   template: './index.html'//模板
   inject: 'body'//将生成的script标签应该放到什么位置
  })
 ],
 
 entry: {
  main: {
   import: ['./src/app.js', './src/app.js'],
   dependOn: 'lodash'
  },
  main2: {
   import: './src/app3.js',
   dependOn: 'lodash'
  },
  lodash: 'loadsh'
 }
}

在index.html文件中

//会自动找到配置的title
<title><%= htmlWebpackPlugin.options.title %></title>

2、多页面环境搭建

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 mode:'development',
 plugin: [
  new HtmlWebpackPlugin({
   title:'多页面应用'，
   template: './index.html'//模板的含义即对应的html文件
   inject: 'body'//将生成的script标签应该放到什么位置
   filename: 'chanel1/index.html',//打包生成的文件名称
   chunks: ['main','lodash'],//在这个文件有哪些模块是需要载入的
   publicPath: 'http://www.a.com/'//载入文件添加的前缀
  }),
  new HtmlWebpackPlugin({
   template: './index2.html'//模板的含义即对应的html文件
   inject: 'body'//将生成的script标签应该放到什么位置
   filename: 'chanel2/index2.html'，//打包生成的文件名称
   chunks: ['main2','lodash'],//在这个文件有哪些模块是需要载入的
   publicPath: 'http://www.b.com/'，//载入文件添加的前缀
  })
 ],
 
 //入口文件
 entry: {
  main: {
   import: ['./src/app.js', './src/app.js'],
   dependOn: 'lodash'，
   filename: 'chanel1/[name].js'//打包生成的文件名称
  },
  main2: {
   import: './src/app3.js',
   dependOn: 'lodash'，
   filename: 'chanel2/[name].js'//打包生成的文件名称
  },
  lodash: {
   import: 'lodash',
   filename:'common/[name].js'//打包生成的文件名称
  }
 }
}

当有两个html页面的时候，在配置的时候要指定打包生成的文件名称，若不指定则会发生文件名冲突的问题

3、webpack之sideEffects

package.json文件中配置下面的一个属性

{
 "sideEffects" : ['*.css']//这个选项告诉webpack只要看到css文件都是有副作用的，你就不要删除了,sideEffects的取值有三种形式：false，true以及数组形式
}