Webpack 文件处理与优化

本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！

作者| 慕课网精英讲师 三水清

到目前为止，我们都是在 index.html

平常我们引用打包后的文件，都是在配置文件中指定了输出的文件名，并手动在相应的html文件中通过script标签引入：

#webpack.config.js配置输出部分
output: {
    filename: "bundle.js"
}
#在页面html中引入
<script src="bundle.js"></script>

当年的校招

1、压缩代码。uglifyJsPlugin 压缩 js 代码， mini-css-extract-plugin 压缩 css 代码

一、webpack概念

1.1 webpack 是什么

今天介绍 webpack 的一个最常用的插件：HTML Webpack Plugin。

Vue-cli3.0以后基于 webpack 4 打造，并学习了 rollup 的零配置思路。因此在设计上更加抽象和简洁，优化和完善了很多配置，所以项目初始化后，Vue帮我们完成了绝大部分情形下的 webpack 配置。就没有了Vue2.0的 build 目录和 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 、vue-loader.conf.js等配置文件。