webpack从零开始第2课: 配置文件
webpack目录
- 第1课: 安装webpack和webpack-dev-server
- 第2课: 配置文件
- 第3课: 做为node的一个模块来使用
- 第4课: 插件篇
- 第5课: 模块篇
- 第6课: 在Vue开发中使用webpack
本课参考资料
- 官方配置部分详解
一:新建配置文件
1.配置文件名
默认为webpack.config.js,可以为其它名字,但这时启动webpack要加参数--config来指定配置文件,如 webpack --config abc.config.js
2.配置文件目录
默认为项目根目录,一般会放到./build文件夹下
提示: 当配置文件在根目录下,且配置文件名为 webpack.config.js,这两个条件都满足时,可以省略--config参数来启动webpack或wepack dev server
3.配置文件格式
- 最终输出一个对象
module.exports={...}
,这种最常用 - 最终输出一个函数
- 最终输出一个Promise
- 最终输出多项配置
3.1 第1种:输出为一个对象
格式为
module.exports={...}
这个最常用,下面会就对象中的各个部分详细讲解
3.2 第2种:输出为一个函数
参考: https://webpack.js.org/config...
module.exports = function(env,arg){return {...}
}
说明1. 返回值必须是一个对象
说明2. 函数有2个参数分别为env和arg,env为执行webpack时带入的,如D:\03www2018\study\webpack2017>webpack --env prod
,这时的env值就为prod,如果没有带参数--env,那么函数中得到的env为undefined。webpack命令行时可用的参数一共有94个,除了--env外的93个都放在第二个参数arg中了,它是一个对象,如果执行webpack命令时没有指定其它参数,那么它的值就是webpack给它的默认值
说明3:参数--env的格式与在webpack.config.js中输出函数中env参数之间的关系
说明4: 如果参数不在webpack的默认范围内,如webpack --wang=haha --env=prod
会报错Unknown argument: wang
说明5:
如根目录>webpack --progress true --watch true --env prod
,这样得到的参数env的值为pro,参数arg的值为
{ ...watch: true,...progress: true,...
}
3.3 第3种:输出为一个Promise
参考官方文档 https://webpack.js.org/config...
当需要异步加载配置文件时,得将配置文件输出为一个Promise,如
module.exports = ()=>{return new Promise((resolved,rejected)=>{settimeout(()=>{resolve({entry: './app.js',/* ... */})},5000)})
}
3.4 第4种:输出多个配置
格式为
module.exports=[{第一个配置对象},{第二个配置对象}]
二:各项配置重点讲解
完整结构如下
module.exports = {entry: "...", output: {... },module: {rules: [{...},{...}, ],},resolve: {modules: ["node_modules",path.resolve(__dirname, "app")],extensions: [".js", ".json", ".jsx", ".css"],alias: {...},},performance: {... },devtool: "source-map", context: __dirname, target: "web", externals: ["react", /^@angular\//],stats: "errors-only",devServer: { ... },plugins: [ ... ],
}
2.1 入口文件和上下文 entry & context
module.exports = {// 上下文是查找入口文件的基本目录,是一个绝对值,所以要用到path.resolve// 如果不设,默认为当前目录// 与命令行中的 webpack --context是一样的// 最后入口文件是 context+entry,// 可以写成./today/wang[前加./],./today/wang/[后加/],不能写成/today/wang,如果../表示在当前目录再往上一层// context 除了这里的入口文件用到,象很多loader,plugin都会要用到这个值context: path.resolve(__dirname,'today/wang'),// entry可以为字符串|对象|数组三种形式// 字符串,适合spa,也就是单页网页,如手机网页// 下面这个entry最终的位置是 项目根目录/today/wang/app/entry.js// 前面./不能少,后面的.js可以省略,也可以写// 以下演示三种entry,实际中取一种就行entry: "./app/entry", // string | object | array// 数组entry: ["./home.js","./about.js","./contact.js"],// 对象,适合于多入口网站,也就是mpa,对象格式的每个键,如home,about,contact是每个入口文件chunk的名字,字符串和数组没有键,它也有一个chunk,名字默认为main entry: {home: "./home.js",about: "./about.js",contact: "./contact.js"},
}
2.2 输出 output
输出的配置比较多,是重点
参考: https://webpack.js.org/config...
module.exports = {output:{//最后生成的打包文件所在的目录,是一个绝对值,,如果不指定,表示当前目录。如果文件夹不存在,会自动创建//这个路径除了这里会用到之外,象html插件,file-loader加载器也会用到// 最后生成的打包文件是 path+ filenamepath:path.resolve(__dirname,'../dist/'), //filename中可以使用[name],[id],[hash],[chunkhash][query]五种变量// filename中可以含子文件夹,如如filename: "a/b/c/[id]app.js"filename: 'wang.js', // 如果entry是个对象且有多个chunkname,那么这里会报错,但会生成一个wang.js,它的内容是第一个chunk的,建议entry是多个chunk的对象时,不要写固定名字,要带[name]变量filename: '[name]wang.js', // 此处的[name]与entry中的chunk名字对应,象上面entry是字符串和数组时,最后输出的文件名是mainwang.js,entry是对象,最后输出的文件名是 homewang.js,aboutwang.js,ccontact123wang.jsfilename: '[id]wang.js', //id从0,1这么增长的,象上面会生成0wang.js,1wang.js,2wang.js三个文件filename: "[name].[hash].bundle.js" //会打包成about.bab6d0fe556449a9229e.bundle,contact123.bab6d0fe556449a9229e.bundle,home.bab6d0fe556449a9229e.bundle,尤其要记住的是[hash]不要单独用,要与[name]或[id]配合用filename: "[chunkhash].yes.js", //78f16d7b19ff7ec1fd3a.yes.js,e12898a66041f68c1959.yes.js,f590b1f2de7b72dea5b3.yes.js,20位hash值hashDigestLength: 8 //指定最后chunkhash和hash变量生成字符串的长度,默认是20个字符}
}
与hash有关的几个配置分别是hashDigest,hashDigestLength,hashFunction,hashSalt知道就行,
2.3 模块 modules
这个是重点,但比较简单,后面的教程中会涉及到,只要记住结构就行
module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {//name: '[path][name].[ext]',name: '[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name,[name],[ext],[path]表示原来的文件名字,扩展名,路径//useRelativePath:true,outputPath: 'img/' // 后面的/不能少} }]},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test')]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}]},
2.4 解析 resolve
这个实用,必须掌握
resolve: {extensions: ['.js', '.vue', '.json'], //扩展名为.js,.vue,.json的可以忽略,如 import App from './app',先在当前目录中找app.js,没有再找app.vue,没找到,再找.json,如果还没找到,报错alias: {'vue$': 'vue/dist/vue.esm.js', // 别名,这是一个正则的写法,表示以vue结尾的,如import Vue from 'vue' 表示 import Vue from 'vue/dist/vue.esm.js''@': path.resolve('src'),// 这也是为懒人服务的,import HelloWorld from '@/components/HelloWorld'这里的@其实就是代表src这个目录 '#': path.resolve('src/ui/components') import Table from '#/table'}},
2.5 插件 plugins
模块和插件是重点,用单独的张姐讲
plugins: [new HtmlWebpackPlugin(HtmlWebpackPluginConfig), // 生成首页html5文件new webpack.DefinePlugin({BJ: JSON.stringify('北京'),})],
2.6 开发服务器 DevServer
devServer: {//progress只在命令行用,不在配置文件中配contentBase: path.resolve(__dirname, "../dist/"), //网站的根目录为 根目录/dist,如果没有指定,使用process.cwd()函数取当前工作目录,工作目录>npm run devport: 9000, //端口改为9000open:true, // 自动打开浏览器index:'front.html', // 与HtmlWebpackPlugin中配置filename一样inline:true, // 默认为true, 意思是,在打包时会注入一段代码到最后的js文件中,用来监视页面的改动而自动刷新页面,当为false时,网页自动刷新的模式是iframe,也就是将模板页放在一个frame中hot:false,publicPath: '/static456/',它与output.publicPath的值应该是一样的,值为上面contentBase目录的子目录,是放js,css,图片等资源的文件夹,记得打包时,将图片等拷贝或打包到该文件下compress:true //压缩}
2.7 开发工具 DevTool
2.8 目标 target
2.9 监控和监控选项 Watch and WatchOptions
watch:true, // 会监视被导入的文件是否有改动,如果有改动,自动打包,但配置文件的改动不会被监视
2.10 外部 External
路径
剪不断,理还乱的路径
未完成,在整理中
webpack从零开始第2课: 配置文件相关推荐
- webpack从零开始第1课:安装webpack和webpack-dev-server
每个项目产品都会让你加埋点,你是愿意花几天一个个加,还是愿意几分钟一个小时加完去喝茶聊天?来试试这520web工具, 高效加埋点,目前我们公司100号前端都在用,因为很好用,所以很自然普及开来了,推荐 ...
- webpack基础第一篇(配置文件)
1.安装mode.js.npm本地环境,lue 2.命令语言 mkdir webpack_demo //建立文件夹 cd webpack_demo //进入文件夹 npm install -g ...
- 配置csrf_django 入门第一课 配置文件
祭奠我逝去的一天,献给和我一样刚刚入门的小白 在我们千辛万苦创建了一个jango项目后,是时候开始配置文件了 第一:镜像路径配置 检查settings文件中templates,确认这里的镜像路径和项目 ...
- 从零开始的数据挖掘课复习(预习)
引论 数据爆炸--解决方法:数据仓库和联机分析处理 什么是数据挖掘? 从大型数据库中提取有趣的 (非平凡的, 蕴涵的, 先前未知的 并且是潜在有用的) 信息或模式 步骤 KDD 过程包括数据清理, 数 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- 从零开始搭建webpack+react开发环境
环境主要依赖版本 webpack@4.8.1 webpack-cli@2.1.3 webpack-dev-server@3.1.4 react@16.3.2 babel-core@6.26.3 bab ...
- 从零构建vue+webpack (一)
写在前面: 给自己看,日常写业务有点儿繁琐,尝试着用vue+webpack 从零开始构建一个项目! 1.新建项目文件夹 运行命令 npm init (一路回车或者-y) 2.打开项目,新建src 文件 ...
- Webpack - 自学笔记
webpack 4 第1课 概念 1 模块化工具 构建工具 打包工具 2 webpack把所有的东西打包成js文件,压缩图片,把sass生成css, 3 热加载 4 自己有服务器 第2课 安装 1 先 ...
最新文章
- HDU 6208 The Dominator of Strings ——(青岛网络赛,AC自动机)
- Long类型转json时前端js丢失精度解决方案
- Mysql 中如何创建触发器
- 【渝粤教育】国家开放大学2018年秋季 1049t金融法规 参考试题
- 纯脚本创建桌面快捷方式
- media jquery 适配ios不同手机
- linux suse最新版本,SUSE Linux Enterprise Server 15 正式发布
- 记一次在Tomcat部署项目后无法启动该项目的例子
- 二维随机变量期望公式_多维随机变量函数的分布
- MyEclipse修改项目名称
- 20191106每日一句
- win10重装系统后,蓝牙开关消失,点击添加蓝牙或其他设备,显示无法连接
- 学习笔记 #pragma GCC diagnostic push 与 #pragma GCC diagnostic pop 的使用
- DRM GEM 驱动程序开发(dumb)
- 广州大学机器学习与数据挖掘实验二
- windows可以ping通linux虚拟机的ip,但是ping不通主机名称解决方案
- 常见的数值积分方法_欧拉积分/中值积分/龙格-库塔积分
- Java 实现替换文件的指定内容
- 推荐一款latex公式OCR识别软件
- aws,bitnami建站过程