webpack(2)--webapck自身的配置
上一记介绍了webpack的安装和基本配置,本记将描述webpack自身的配置
一:指定webpack入口以及出口目录以及输出文件
相信读者在看完上一记后会有一点疑惑:为什么运行webpack要配置src,为什么会有构建打包文件时会生成dist目录且里面会有一个main.js呢?
—mydemo
______dist
——————__main.js
______src
——————__index.js
——————__common.js
——————__esmodule.js
——index.html
这是由于webapck在打包过程中会默认将当前根目录下src/index.js作为入口文件,并会在根目录下新建一个dist目录,并将打包后的文件(默认main.js)放置在dist的目录中
如何配置入口以及出口目录以及文件 ?
三种办法:
- 命令行
当前根目录下输入npx webpack --entry 入口目录及指定入口文件 --output-path 出口目录及指定出口目录
// 入口:yentry.js 出口 ./output
npx webpack --entry ./src/myentry.js --output-path ./output
缺点:命令行里输入,并不能确保效率
2. 在package.json中配置
在webpack中的script字段,给打包命令(如build)配置方法1的代码
// script字段下
"scripts":{
"build" : "webpack --entry ./src/myentry.js --output-path ./output "
}
缺点:scripts内要写太多冗余代码,并不能一眼就看出要做的事情
3.在webpack.config.js中配置项目入口以及打包的目录文件(推荐)
webpack.config.js是一个用于webpack配置选项的文件,可以在这里做针对wenpack本身以及loader,plugins的配置。本质上是通过导出一个配置对象,当webpack运行时会优先读取这个文件,如果有就执行这个对象内的配置
根目录下新建webpack.config.js
// 由于webpack底层由node支持,因而使用node风格的导出方式(读者也可以尝试使用esmodule方式,但是流程太过繁琐,不推荐)
//webpack.config.js
const path = require('path') //引入node原生模块path
module.exports = {
entry : './src/main.js'
output: {
path: path.resolve(__dirname,'build'), //构建完成输出的目录地址(需要绝对路径)
filename: 'mydemo.js'
}
}
命令解析:
entry :入口文件(需附带目录)
output: 输出目录以及文件配置path: 输出的路径,需要绝对路径
path.resolve : node中path模块的一个方法,用于拼接两个字符串
__dirname: 从磁盘到当前目录下的绝对路径
'build' : 构建后的目录名,内部存放打包后的文件
filename: 打包后的文件(在build内部)
完成上述配置后,保存再执行一遍npm run build即可
这样就完成了webpack入口以及出口文件的配置
二:重命名webpack配置文件
一定要将webpack.config.js作为webpack的配置文件吗?是否可以重命名?
可以, 但不推荐,重命名后会增加后续开发者阅读代码难度。因而普遍约定不要重命名webpack.config.js
重命名webpack.config.js的方法:
package.json下的script字段的build下输入以下命令:
// package.json
"script":{
"build":"webpack --config renameconfig.js"
}
下一记:常用loader的安装与配置
webpack(2)--webapck自身的配置的更多相关文章
- 规范开发目录 及 webpack多环境打包文件配置
规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...
- webpack处理url资源的配置
webpack处理url资源的配置 1.安装 npm i url-loader -D 2.修改webpack.config.js const path = require('path'); // 启用 ...
- webpack 功能大全 【环境配置】
1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...
- webpack中typeScript的打包配置
2018年typescript发展的非常好,js是一门非常灵活的语言,所以一个功能,怎么写都能够写出来,但是这也会导致一个问题,不同人写js的方式不同,那么会导致同一个功能出现的代码风格会迥然不同.这 ...
- webpack构建vue项目(配置篇)
最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...
- vueJs+webpack单页面应用--vue-router配置
vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+ npm安装vue-router: $ npm install vue-router -- ...
- webpack es6 to es5支持配置
1. 安装webpack npm install webpack --save-dev 2. 安装babel 实现 ES6 到 ES5 npm install --save-dev babel-co ...
- webpack里的module选项配置
webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...
- webpack开发与生产环境配置
前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...
随机推荐
- rabbitmq五种模式详解(含实现代码)
一.五种模式详解 1.简单模式(Queue模式) 当生产端发送消息到交换机,交换机根据消息属性发送到队列,消费者监听绑定队列实现消息的接收和消费逻辑编写.简单模式下,强调的一个队列queue只被一个消 ...
- .NET6 平台系列4 .NET开源之路
系列目录 [已更新最新开发文章,点击查看详细] .NET平台是微软于2000年推出的Windows操作系统的应用软件开发框架,发展至今形成巨大的技术栈,涉及多语言(支持C#.F#.VB.NET ...
- 753. Cracking the Safe
There is a box protected by a password. The password is n digits, where each letter can be one of th ...
- creating a table and inserting data
/** Grocery list: Bananas (4) Peanut Butter (1) Dark Chocolate Bars (2) **/ CREATE TABLE groceries ( ...
- php 不定参数的传递
相关函数 func_get_args func_num_args <?php function more_args(){ $args = func_get_args(); for($i=0;$i ...
- hdu1572 水搜索
题意: 中文的不解释; 思路: 其实就是一个水的搜索,直接搜索不会超时,还有别跑最短路了,题目没要求跑最短路,别读错题,刚开始自己嘚嗖的跑了一边最短路 wa了 ,正好最近看了STL ...
- hdu4771 水搜索(状态压缩+bfs)
题意: 给你一个n*m的地图,问你从起点出发,吧所有的宝藏都捡完用的最少时间. 思路:k <= 4,水题,直接开一个数组mark[now][x][y];now代表的是当前检宝藏的二进制 ...
- Android最新敲诈者病毒分析及解锁(11月版)
一.样本信息 文件名称:久秒名片赞,(无需积分s)(2)(1)(1).apk 文件大小:1497829字节 文件类型:application/jar 病毒类型:Android.CtLocker 样本包 ...
- CTFHub-技能树-信息泄露
CTFHub-技能树-信息泄露 1.目录遍历 文件夹不多,直接手翻就行 2.PHPinfo 直接搜索ctfhub{就能找到 3.备份文件下载 3-1 网站源码 打开之后: 因为这里组合比较少可以手动测 ...
- C# 通过DataSet 获取SQL 存储过程返回的多个结果集(tables)
测试数据:Northwind 链接地址: https://files.cnblogs.com/files/louiszh/NorthWind.zip 首先创建一个测试存储过程: IF EXISTS ( ...