上一记介绍了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的目录中

如何配置入口以及出口目录以及文件 ?

三种办法:

  1. 命令行

    当前根目录下输入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自身的配置的更多相关文章

  1. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  2. webpack处理url资源的配置

    webpack处理url资源的配置 1.安装 npm i url-loader -D 2.修改webpack.config.js const path = require('path'); // 启用 ...

  3. webpack 功能大全 【环境配置】

    1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机 ...

  4. webpack中typeScript的打包配置

    2018年typescript发展的非常好,js是一门非常灵活的语言,所以一个功能,怎么写都能够写出来,但是这也会导致一个问题,不同人写js的方式不同,那么会导致同一个功能出现的代码风格会迥然不同.这 ...

  5. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  6. vueJs+webpack单页面应用--vue-router配置

    vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+ npm安装vue-router: $ npm install vue-router -- ...

  7. webpack es6 to es5支持配置

    1. 安装webpack npm install webpack --save-dev 2. 安装babel  实现 ES6 到 ES5 npm install --save-dev babel-co ...

  8. webpack里的module选项配置

    webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...

  9. webpack开发与生产环境配置

    前言 作者去年就开始使用webpack, 最早的接触就来自于vue-cli.那个时候工作重点主要也是 vue 的使用,对webpack的配置是知之甚少,期间有问题也是询问大牛 @吕大豹.顺便说一句,对 ...

随机推荐

  1. rabbitmq五种模式详解(含实现代码)

    一.五种模式详解 1.简单模式(Queue模式) 当生产端发送消息到交换机,交换机根据消息属性发送到队列,消费者监听绑定队列实现消息的接收和消费逻辑编写.简单模式下,强调的一个队列queue只被一个消 ...

  2. .NET6 平台系列4 .NET开源之路

    系列目录     [已更新最新开发文章,点击查看详细] .NET平台是微软于2000年推出的Windows操作系统的应用软件开发框架,发展至今形成巨大的技术栈,涉及多语言(支持C#.F#.VB.NET ...

  3. 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 ...

  4. creating a table and inserting data

    /** Grocery list: Bananas (4) Peanut Butter (1) Dark Chocolate Bars (2) **/ CREATE TABLE groceries ( ...

  5. php 不定参数的传递

    相关函数 func_get_args func_num_args <?php function more_args(){ $args = func_get_args(); for($i=0;$i ...

  6. hdu1572 水搜索

    题意: 中文的不解释; 思路:           其实就是一个水的搜索,直接搜索不会超时,还有别跑最短路了,题目没要求跑最短路,别读错题,刚开始自己嘚嗖的跑了一边最短路 wa了 ,正好最近看了STL ...

  7. hdu4771 水搜索(状态压缩+bfs)

    题意:      给你一个n*m的地图,问你从起点出发,吧所有的宝藏都捡完用的最少时间. 思路:k <= 4,水题,直接开一个数组mark[now][x][y];now代表的是当前检宝藏的二进制 ...

  8. Android最新敲诈者病毒分析及解锁(11月版)

    一.样本信息 文件名称:久秒名片赞,(无需积分s)(2)(1)(1).apk 文件大小:1497829字节 文件类型:application/jar 病毒类型:Android.CtLocker 样本包 ...

  9. CTFHub-技能树-信息泄露

    CTFHub-技能树-信息泄露 1.目录遍历 文件夹不多,直接手翻就行 2.PHPinfo 直接搜索ctfhub{就能找到 3.备份文件下载 3-1 网站源码 打开之后: 因为这里组合比较少可以手动测 ...

  10. C# 通过DataSet 获取SQL 存储过程返回的多个结果集(tables)

    测试数据:Northwind 链接地址: https://files.cnblogs.com/files/louiszh/NorthWind.zip 首先创建一个测试存储过程: IF EXISTS ( ...