最后
javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
如果需要配置多个 HtmlWebpackPlugin
,那么 filename
字段不可缺省,否则默认生成的都是 index.html
。
但是有个问题,index.html
和 login.html
会发现,都同时引入了 index.f7d21a.js
和 login.f7d21a.js
,通常这不是我们想要的,我们希望 index.html
中只引入 index.f7d21a.js
,login.html
只引入 login.f7d21a.js
。
HtmlWebpackPlugin
提供了一个 chunks
的参数,可以接受一个数组,配置此参数仅会将数组中指定的 js 引入到 html 文件中
module.exports = {
//…
plugins: [
new HtmlWebpackPlugin({
template: ‘./public/index.html’,
filename: ‘index.html’, //打包后的文件名
chunks: [‘index’],
}),
new HtmlWebpackPlugin({
template: ‘./public/login.html’,
filename: ‘login.html’, //打包后的文件名
chunks: [‘login’],
}),
],
}
这样执行 npm run build
,可以看到 index.html
中仅引入了 index 的 js 文件,而 login.html
中也仅引入了 login 的 js 文件。
clean-webpack-plugin
clean-webpack-plugin
用于在打包前清理上一次项目生成的 bundle 文件,它会根据 output.path
自动清理文件夹;这个插件在生产环境用的频率非常高,因为生产环境经常会通过 hash 生成很多 bundle 文件,如果不进行清理的话每次都会生成新的,导致文件夹非常庞大。
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, ‘/index.html’),
}),
new CleanWebpackPlugin(), // 所要清理的文件夹名称
]
extract-text-webpack-plugin
将 css 成生文件,而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
plugins: [
// 将css分离到/dist文件夹下的css文件夹中的index.css