摘要：根据模板插入等生成最终生成的存放路径，相对于的路径模板路径插入的位置，路径设置属性，属性值是所在的路径。配置后，在使用时将不再需要和进行引入，直接使用即可。
一 webpack.base.conf.js
1. entry 为入口文件 1.1 在此可以绑定 babel 垫片 处理ie兼容 1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置
2. resolve.alias 别名/重定向 可以简写文件引入路径，避免大量无用代码，并且增加代码可读性，可以省略扩展名如 （".js", ".vue", ".json"）
3. webpack强大的 loader 功能 3.1 可以设置 eslint ，对.js和.vue文件在编译之前进行检测，检查有没有语法错误 3.2 新增文件类型，必须在此配置，否则不识别 3.3 limit 限制 10000 个字节以下的图片才使用DataURL 3.4 babel-loader 对js文件使用babel-loader转码,该插件是用来解析es6等代码
4. node 该选项是Node.js全局变量或模块，这里主要是防止webpack注入一些Node.js的东西到vue中二 webpack.dev.conf.js
1. html-webpack-plugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: "../view/index.html", //生成的html存放路径，相对于path的路径
template: "./index.html", //html模板路径
inject: "body", //js插入的位置，true/"head"/"body"/false
favicon: "./images/favicon.ico", //favicon路径 设置favicon属性，属性值是favicon所在的路径。
minify: { //压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
removeAttributeQuotes: true // 移除属性的引号
}
})
2. copy-webpack-plugin 将单个文件或整个目录复制到构建目录DefinePlugin允许在编译时(compile time)配置的全局常量DllPlugin为了极大减少构建时间。 from 定义要拷贝的源目录 from: __dirname + ‘/src/public’ to 定义要拷贝到的目标目录 from: __dirname + ‘/dist’ toType file 或者 dir 可选，默认是文件 force 强制覆盖先前的插件 可选 默认false context 可选 默认base context可用specific context flatten 只拷贝文件不管文件夹 默认是false ignore 忽略拷贝指定的文件 可以用模糊匹配 ### 注意： 所以 在 static 目录下的文件，不会被压缩，直接打包到 dist 目标目录中，会增大size。
3. webpack.ProvidePlugin webpack配置ProvidePlugin后，在使用时将不再需要import和require进行引入，直接使用即可。 如 jquery echart lodash三 webpack.prod.conf.js
1. uglifyjs-webpack-plugin 用来对js文件进行压缩，从而减小js文件的大小，加速load速度。 1.1 pure_funcs — 默认为null. 你可以传入一个名称的数组，而UglifyJs将会假定那些函数不会产生副作用. 危险: 如果名称在作用范围内被重新定义了就不会检查. 1.2 drop_debugger — 移除调试器和调试语句 1.3 warnings — 当去掉不可达代码或者没有被使用的声明等东西时，显示警告. 1.4 drop_console — 默认为false. 传入true会丢弃对console.函数的调用. 1.4 sourceMap 设置false后可以禁止查看显示 Source Maps ，并且 打包后的 dist 不再生成 **.map.js 从而大大缩减size
2. extract-text-webpack-plugin 为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
3. CommonsChunkPlugin 代码分割/提取公共代码
用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。
1.1 name：可以是已经存在的chunk（一般指入口文件）对应的name，那么就会把公共模块代码合并到这个chunk上；否则，会创建名字为name的commons chunk进行合并
1.2 filename：指定commons chunk的文件名
1.3 chunks：指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks
1.4 minChunks：既可以是数字，也可以是函数，还可以是Infinity，具体用法和区别下面会说
4. compression-webpack-plugin 非常好用的压缩插件 算法 "gzip"
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109676.html
摘要：前言使用过进行项目开发的同学，一定知道或者使用过脚手架，他能够很好的搭建项目结构和工程，让我们能够把足够的精力放在业务开发上。对象提供一系列属性，用于返回系统信息返回当前进程的命令行参数数组。 前言 使用过 vue 进行项目开发的同学，一定知道或者使用过 vue-cli 脚手架，他能够很好的搭建项目结构和工程，让我们能够把足够的精力放在业务开发上。也正是因为这样，很多时候我们会因为项目...
摘要：我拖拖拖拖放基础篇前端掘金不要搞错，本文不是讲如何拖地的。结构说明前端应该从哪些方面来优化网站前端掘金不知道是哪位大牛的文章，转过来回答。 我拖拖拖 --H5 拖放 API 基础篇 - 前端 - 掘金不要搞错，本文不是讲如何拖地的。看过《javascript精粹》朋友应该知道，他实现拖放的过程比较复杂，现在时代不同了，我们用H5的新的拖放API就能非常方便的实现拖放效果了。最近在园子见...
摘要：因为用户不用在第一次进入应用时下载所有代码，用户能更快的看到页面并与之交互。译高阶函数利用和来编写更易维护的代码高阶函数可以帮助你增强你的，让你的代码更具有声明性。知道什么时候和怎样使用高阶函数是至关重要的。 Vue 折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示) 稍微改改都能直接拿来用~~~哟吼吼,哟吼吼..... 如何无痛降低 if else 面...
摘要：借助，我们通过非常简单的问答形式，方便地初始化一个工程，完全不需要担心繁复的配置等等。简单来说，就是不仅仅能初始化工程，理论上能够初始化一切工程，包括，等等等等，只要你有一份能够运行的模板，就能够通过进行工程的初始化。 相信对于大部分使用过VueJS的同学来说，vue-cli是他们非常熟悉的一个工具。借助vue-cli，我们通过非常简单的问答形式，方便地初始化一个vue工程，完全不需要...
摘要：转载文章公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录一下。 (转载文章)公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，so捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录...
阅读 1014·2021-11-22 14:56
阅读 974·2021-11-11 16:54
阅读 7553·2021-09-23 11:55
阅读 2999·2021-09-22 15:57
阅读 2787·2021-08-27 16:25
阅读 667·2019-08-30 15:55
阅读 1657·2019-08-30 15:43
阅读 1592·2019-08-30 14:23
