详解webpack的配置文件entry与output

本文介绍了webpack的配置文件entry与output，分享给大家，具体如下：

在webpack.config.js中entry是唯一入口文件

entry也可以是一个数组

如果是一个数组，会将数组里面的文件一起打包到bundle.js

entry也可以是一个对象。

如果output里filename有三个值：

.[name]是文件名字是entry的键值。

.[hash]是md5加密的值。

.[chunkhash]这里是作为版本号使用。

每次修改文件，运行之后，都会生成不一样的hash 于chunkhash值，方便上线时静态资源的版本管理。

文件名如果每次运行都是变化的，文件引入的名字也需要变化，使用install html-webpack-plugin插件，安装npm install html-webpack-plugin --save-dev

完成之后在webpack.config.js文件里面添加plugins键：

plugins的值是一个<strong>数组</strong>，里面的值都是 new htmlWebpackPlugin(),参数一个配置数组，如下：

  • title: 用来生成页面的 title 元素
  • filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。
  • template: 模板文件路径，支持加载器，比如 html!./index.html
  • inject: true | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
  • favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
  • minify: {} | false , 传递 html-minifier 选项给 minify 输出
  • hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。
  • cache: true | false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。
  • showErrors: true | false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中
  • chunks: 允许只添加某些块 (比如，仅仅 unit test 块)
  • chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
  • excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

最终生成

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack的配置文件entry与output

    详解webpack的配置文件entry与output

    本文介绍了webpack的配置文件entry与output,分享给大家,具体如下: 在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组,会将数组里面的文件一起打包到bundle.js entry也可以是一个对象. 如果output里filename有三个值: .[name]是文件名字是entry的键值. .[hash]是md5加密的值. .[chunkhash]这里是作为版本号使用. 每次修改文件,运行之后,都会生成不一样的hash 于ch

  • 详解webpack 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如html5.cmd中切到当前文件夹. npm init -y 这个命令会创建一个默认的package.json.它包含了项目的一些配置参数,通过它可以进行初始安装.详细参数:https://docs.npmjs.com/files/package.json. 不要y参数的话,会在命令框中设置各项参数,但

  • 详解webpack模块化管理和打包工具

    本篇文章主要介绍了详解webpack模块化管理和打包工具,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Webpack简介 webpack是当下最热门的前端资源模块化管理和打包工具. 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际 需要的时候再异步加载.通过 loader  的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块. AMD 模块. ES6 模块.CSS.图片. JSON.

  • 详解webpack 打包文件体积过大解决方案（code splitting）

    优化对比 : 未优化前:index.html引入一个main.js文件,体积2M以上. 优化后入:index.html引入main.js.commons.js.charts.js.other.js.以达到将main.js平分目的.每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具: vue.webpack.babel.highcharts.echarts.jquery.html2canvas******此去省略若干m代码 问题: 开发环境用webpack后发现单个js文件

  • 详解webpack的clean-webpack-plugin插件报错

    1.出错代码 const path = require('path') const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__dirname, 'dist'),

  • 一文详解webpack中loader与plugin的区别

    目录 一.Loader 1.loader的作用: 2.loader的工作原理: 3. Loader 执行顺序 4.如何开发一个loader 二.Plugin 1.plugin解决其他的更多的自动化打包工作 2.自定义插件 常见的Loader和Plugin loader: plugin: 一.Loader 1.loader的作用: webpack 只能直接处理 javascript 格式的代码.任何非 js 文件都必须被预先处理转换为 js 代码,才可以参与打包.loader(加载器)就是这样一个

  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcss-loader的配置,分享给大家,具体如下: 开始 npm i sass-loader node-sass postcss-loader autoprefixer 首先配置postcss-loader 在这里postcss是为了来给浏览器内核添加私有前缀.当前postcss还有其他操作比如px2rem之类的.可以把postcss想象成babel-core只是一个控制中心,主要的还是它分散出来的插件. /**** package.json **

  • 详解webpack babel的配置

    Babel是什么 Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到: 使用下一代的javascript(ES6,ES7,--)代码,即使当前浏览器没有完成支持: 使用基于JavvScript进行扩展语言,比如React的JSX: npm i babel-core babel-preset-env babel-loader babel-plugin-transform-runtime babel-preset-stage-2 -D 关于babel的使用 首先

  • 详解webpack的文件监听实现(热更新)

    前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

  • 详解SpringBoot读取配置文件的N种方法

    我们在项目开发中经常会用到配置信息,例如数据库连接的帐号.密码等,而为了方便维护,我们通常将这些信息放到配置文件中.在需要用到这些配置信息时,可以通过代码获取.下面我们看看Spring中有哪些获取配置信息的方法. PropertiesLoaderUtils读取 通过ClassPathResource加载配置文件资源,结合PropertiesLoaderUtils类读取,源码如下: ClassPathResource resource = new ClassPathResource("applic

随机推荐