webpack index.html空白,webpack4.x使用踩坑

webpack.config.js简单配置:

1.

module.exports={

entry:{

a:'./src/index.js'

},

output:{

path:__dirname+'/dist',

filename:'bundel.js'

}

}

2.

const path=require('path');

module.exports={

entry:{

a:'./src/index.js'

},

output:{

path:path.resolve(__dirname,'dist'),

filename:'bundel.js'

}

}

3.     4.x版本可以修改配置文件名为:ltc.config.js

运行时候:webpack --config ltc.config.js

在package.json中配置script

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build":"webpack --config ltc.config.js"

},

4. 多入口,多出口,html插件的使用,

建一个src,目录,里面有index.js,然后webpack.config.js配置

const path=require('path');

module.exports={

entry:'./src/index.js',

output:{

path:path.resolve(__dirname,'dist'),

filename:'bundle.js'

}

}

根目录建一个dist目录里面写个静态index.html测试如下:

 

webpack4.x以后在package.json配置一下:

{

"name": "webpackdemo",

"version": "1.0.0",

"description": "",

"main": "webpack.config.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build":"webpack --mode development"

},

"keywords": [],

"author": "",

"license": "ISC"

}

多入口一个出口配置:建一个index2.js，目录结构如下:

module.exports={

entry:['./src/index.js','./src/index2.js'],

output:{

path:path.resolve(__dirname,'dist'),

filename:'bundle.js'

}

}

最后打包生成:bundle.js

多入口多出口：

module.exports={

entry:{

index:'./src/index.js',

index2:'./src/index2.js'

},

output:{

path:path.resolve(__dirname,'dist'),

filename:'[name].bundle.js'

}

}

最后生成:

这样就比较麻烦了,你要手动修改创建的dist目录下的index.html引用的文件名

5.借用html-webpack-plugin自动生成dist文件并且index.html自动引入依赖文件,生成页面

cnpm i html-webpack-plugin -D

注意:html-webpack-plugin依赖webpack,和webpack-cli，这两个都需要本地安装一下

模版的使用:

module.exports={

entry:{

index:'./src/index.js',

index2:'./src/index2.js'

},

output:{

path:path.resolve(__dirname,'dist'),

filename:'[name].bundle.js'

},

plugins:[

new HtmlWebpackplugin({

hash：true,

title:'webpack精髓',

template:'./src/index.html'

})

]

}

然后在./src/index.html配置即可(可设置hash：true清除缓存):

打包生成如下:

也可以设置：plugins:[

new HtmlWebpackplugin({

hash:true,

minify:{

collapseWhitespace:true

},

title:'webpack精髓',

template:'./src/index.html'

})

]

整个HTMl空白的被压缩

后续更新.................................................