第一次写博客,有点小小的兴奋,也有一点点的慌张~~~

我是一个小白,仅记录自己的学习过程,内容仅供参考,如果有问题的地方,还希望各位大牛多多指教,我菜,菜是原罪,但是我可以学~~

1.最基本的:如何使用webpack

#npm/yarn install/add webpack

webpack默认的config文件名字必须是webpack.config.js,如果需要使用其他的名字,
在执行打包的时候,必须嗷这样来使用npm run --config webpacj.other.config.js。
有点长,不如配个脚本舒舒服服的,在package.json中的scripts中配置:
"build": "webpack --config webpack.other.config.js",然后执行一下npm run build,瞅瞅~~

2. 基本config

let path = require("path"); // 这个东西是webpack的核心,不需要安装,直接用就行了哟
module.exports = {
// webpack打包时的环境,开发或者生产环境,由你选择,但是呢,我们一般会配置一个基本的webpack.config.js,里面配置一些公共的配置,然后另外新建两个webpack的配置文件,一个用于开发,一个用于生产环境,这样子我们在打包的时候,就省去了我们自己去修改mode了呀,毕竟代码能做的事情,我们这辈子都不可能手动去做哈
mode: "production/development",
// webpack没有打包html这个说法吧,所以说这个入口是js文件嗷!!
entry: "./src/index.js", // webpack执行打包时的入口
// 补充一哈,如果是多个入口打包的话,就是介个样子来写的哟,具体的用法,后面再更新嗷,不然都没有写的了~
// entry: {
// "home": "./src/home/index.js",
// "main": "./src/main/index.js"
// },
devServer: {}, // 这个应该很熟悉哦,代理,简直用的巴巴适适的嘛
output: { // 跟入口文件对应起来的,有入口,肯定有出口的
/* 这个地方,一定要注意,必须是绝对路径(要画重点,就像是没到节假日你的
女朋友给你划重点的那样),但是在实际开发的过程中,这个
路径我们根本没发写成绝对路径呀~难呐。因此,需要使用到
webpack本身的一个核心模块path,这个模块会调用一个resolve
方法,直接将相对路径就解析成了绝对路径。怎么样~是不是贼溜鼻的
*/
// zzff,这个大家可能不知道是什么,但是dist大家肯定熟悉吧,没错,这个就是我们在打包的时候生成的目录的名字
path: path.resolve(__dirname, "zzff"),
/* 入口打包出来之后,新生产的文件的名字,如果想要将生成的
index.js这个文件放在zzff目录下的某个文件夹下面呢,就只
需要这样写就行了: filename: "js/index.js"
*/
filename: "index.js",
/* 打包的所有文件,只要设计到引用的,例如:src="css/index.css",都会在路径的最前面加上www.zzff.cn,src就变成了 src="www.zzff.cn/css/index.js"
是不是这个路径看着有种怪怪的感觉,有那就对了,一般呢,很少在这个地方配置域名的,一般都是./或者../,嘿嘿嘿~~~继续往下看^_^
*/
publicPath: "www.zzff.cn"
},
// 这个很重要的,要划重点哦,
// webpack的插件集合(我是这个样称呼它的),是一个数组,存放的是webpack需要使用的插件
// 既然是插件,说明肯定不是webpack自带的,需要我们安装哈,使用到的插件安装会在底部统一例举
plugins: [
// 插件一半都是这么用的,要new它,当然各位朋友也可以用它来new个女/男朋友,哈哈哈~(^-^)
new HtmlWebpackPlugin({ // html插件,打包之后在zzff目录下面会创建一个以html结尾的文件
template: "./src/index.html", // 相当于entry,一个入口文件,这个必须要有的哦
filename: "index.html/zf.html", // 熟吧,打包生成后的html文件的名字
minify: { // 压缩html的一些config
removeComments: true, // 清除html中的注释,默认为false
collapseWhitespace: true, /* 清除html中的空格、换行符,相当于把html的内容全部打包成一行了,画面太美
简直不敢想象。默认为false(这个配置我刚开始的时候使用
是正常的,写文章复现的时候就不行了,知道的朋友麻烦给我
说一下是怎么会事呢,灰常感谢)
*/
minifyCSS: true, // 压缩html页面中的css样式,有时候我们可能会将样式写在html中的style标签里面,这个时候就需要我们去进行压缩
// 还有很多属性,就不一个一个例举了,毕竟百度才是万能的嘛
}
hash: true, // 这个东西加上,在打包的时候,会在打包文件的后面随机生成一串哈希戳哦,更有效的防止缓存,尴尬的要死
}),
new MiniCssExtractPlugin({ // 抽离html中的css代码
filename: ".css/index.css" //抽离出来的css代码放置在css文件夹下面的index.css文件中
/* 想了半天,难怪当初看的时候就只写了一个属性,这个要配合到loader来使用,贼舒服
*/
}),
// webpack的插件太多佬,就不一一写了,以后遇上了再记录一下就OK了,也欢迎大家补充

webpack基础配置(一)的更多相关文章

  1. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  2. webpack基础配置

    webpack运行规则: Webpack 会给每个模块分配一个唯一的id并通过这个id索引和访问模块.在页面启动时,会先执行入口文件中的代码,其它模块会在运行 require 的时候再执行. 运行时主 ...

  3. 2、webpack基础配置

    我们需要安装webpack 还需要安装webpack cli 这两个都是我们的开发依赖 这里我们一般会加一个-D表示上线的时候不需要他们两个包 安装我们的webpack 先初始化一下,记住我们的安装依 ...

  4. webpack(11)配置文件分离为开发配置、生成配置和基础配置

    前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...

  5. webpack4基础入门操作(二)(讲解下webpack的配置内容)

    前序:我之所以开始写这个系列,是因为我最近出去看了下外面的情况,发现技术更新的脚步太快了.我的技术栈已经完全落伍了. 所以准备今年学习写新的东西,而React.webPack4就是我的第一步.前面我看 ...

  6. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  7. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  8. webpack中Entry与Output的基础配置

    entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...

  9. react+webpack基础学习配置

    最近学习react,公司的项目是使用create-react-app来搭建的,而我想重新使用node+mysql+react来搭建一个新的博客. 今天尝试从零开始搭建一个webpack+react项目 ...

随机推荐

  1. 关于vyos 防火墙配置

    VyOS是一个基于Debian的网络操作系统,是Vyatta的社区fork.Vyatta是博通的企业级的产品,通过这套系统,能在x86平台提供路由,防火墙和×××的功能. 这个系统提供了和其他诸如Ci ...

  2. 压缩感知与稀疏模型——Convex Methods for Sparse Signal Recovery

    第三节课的内容.这节课上课到半截困了睡着了,看着大家都很积极请教认真听讲,感觉很惭愧.周末不能熬太晚.这个博客就记录一下醒着时候听到的内容. Motivation 目前的时代需要处理的数据量维度可能很 ...

  3. [LC] 77. Combinations

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...

  4. 对TD tree的使用体验及建议

    TDtree与QQ空间有着相似的功能,你可以在里面发表自己的感受与心情,也可以存储照片或者给喜欢的说说点赞.发表评论等,可以说这是一个将QQ空间从QQ里独立出来的软件.作为一个娱乐性的软件,它的功能还 ...

  5. mysql配置白名单

    1. 测试是否允许远程连接 $ telnet 192.168.1.8 3306 host 192.168.1.4 is not allowed to connect to this mysql ser ...

  6. 1022 D进制的A+B (20 分)

    题目:1022 D进制的A+B (20 分) 思路: 首先根据A.B的取值范围,可知A+B不过2^31,所以转换成进制数时的最长长度为31. 转换成进制的数存进数组,然后反向输出. 要注意和为0的情况 ...

  7. Hadoop什么?

    Hadoop是什么?Hadoop是一个开发和运行处理大规模数据的软件平台,是Appach的一个用java语言实现开源软件框架,实现在大量计算机组成的集群中对海量数据进行分布式计算. Hadoop框架中 ...

  8. python3下应用requests

    模拟浏览器请求有两种,一种是不需要用户登录或者验证的请求,一种是需要用户登录或者验证的请求 那么我们先来说说不需要用户登录的方法 这种方式直接可以获取源码,用get的请求方式 登录的方式 获取这种页面 ...

  9. GOM通区插件-支持GOM绝对路径-读取配置项-分割字符等功能。不定期更新

    A-A+ 2019年07月19日 Gom引擎 阅读 45 views 次   [@Main] #IF #SAY [<读配置项/@读配置项>] [<写配置项/@写配置项>] [& ...

  10. openpyxl操作excel表格

    1.openpyxl 只支持打开.xlsx格式,其他excel类库基本也是 2.不能这里的工作面板直接右键新建表格,必须到文件夹下面去新建,可以把在别的目录新建的表格直接复制到当前目录下 3.从表格中 ...