上一篇已经实现了webpack的基本打包操作,但是并没有使用配置文件,而是使用 CLI 来实现打包。

配置文件

// webpack.config.js
module.exports = {
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
入口起点
单文件
module.exports = {
entry: "./src/index.js"
} 多文件
// 对象语法
module.exports = {
entry: {
app: "./sec/app.js",
vendors: "./src/vendors.js"
}
} // 应用场景: 分离应用程序、和第三方库入口、多页面应用程序 // 多页面应用程序
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
出口
基本用法
// webpack.config.js
const path = require('path');
const config = {
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}; module.exports = config; 多入口起点
//
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
// 这里的[name]是占位符,之后会替换为 app、search
// 写入到硬盘:./dist/app.js, ./dist/search.js

继续之前的学习

// webpack.config.js
var path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
// 执行
$ npx webpack --config webpack.config.js
// 同样能打包OK

上面讲的比较零碎呢,看着不爽,那我们再来一个比较实用一点的demo吧

目录结构
| dist
- index.html
| src
- index.js
| package.json
| webpack.config.js
具体代码实现
// webpack.config.js
var path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
}
} // index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="title"></div>
<script src="./js/bundle.js"></script>
</body>
</html> // index.js
document.getElementById('title').innerHTML = 'hello webpack';
package.json的配置尤其重要:
{
"name": "webpack_new_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode development"
// "build": "webpack --config webpack.config.js --mode development"
// 上面两种配置等价,--config webpack.config.js可以不写,默认是它。
// webpack 4.0之后多了mode的配置,因此我们需要配置一下,不然会出现警告哦
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
}

运行一下:npm run build

补充:
// 按道理我们在本地安装了webpack,这部就是应该直接运行webpack 就可以打包了嘛

>$  webpack
webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路
径正确,然后再试一次。
所在位置 行: 字符:
+ webpack
+ ~~~~~~~
+ CategoryInfo : ObjectNotFound: (webpack:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException // 恰恰报错了呢 // 解决办法一
全局安装 webpack 和 webpack-cli // 解决办法二
就是上诉我们在package.json中进行配置
"build": "webpack --mode development"

扩展一下:

webpack中常用的:

var path = require('path')

是nodejs中的path模块,介绍一下webpack中常用的几个path模块的方法:

应用node环境的时候,这个path模块的方法经常被用到,处理路径的方法。

Nodejs的path模块介绍:

网址:http://nodejs.cn/api/path.html

path 模块提供了一些工具函数,用于处理文件与目录的路径。可以通过以下方式使用:

const path = require('path');

var path = require('path')

Windows 与 POSIX

path 模块的默认操作会根据 Node.js 应用程序运行的操作系统的不同而变化。 比如,当运行在 Windows 操作系统上时,path 模块会认为使用的是 Windows 风格的路径。

在 POSIX 上:

path.basename('C:\\temp\\myfile.html');// 返回: 'C:\\temp\\myfile.html'

在 Windows 上:

path.basename('C:\\temp\\myfile.html');// 返回: 'myfile.html'

要想在任何操作系统上处理 Windows 文件路径时获得一致的结果,可以使用 path.win32

在 POSIX 和 Windows 上:

path.win32.basename('C:\\temp\\myfile.html');// 返回: 'myfile.html'

要想在任何操作系统上处理 POSIX 文件路径时获得一致的结果,可以使用 path.posix

在 POSIX 和 Windows 上:

path.posix.basename('/tmp/myfile.html');// 返回: 'myfile.html'

注意:在 Windows 上 Node.js 遵循单驱动器工作目录的理念。 当使用驱动器路径且不带反斜杠时就能体验到该特征。 例如,fs.readdirSync('c:\\') 可能返回与 fs.readdirSync('c:') 不同的结果。

常见方法

path.join([...paths])

新增于: v0.1.16

path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起,并规范化生成的路径。

长度为零的 path 片段会被忽略。 如果连接后的路径字符串是一个长度为零的字符串,则返回 '.',表示当前工作目录。

例子:

path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');// 返回: '/foo/bar/baz/asdf'

path.join('foo', {}, 'bar');// 抛出 'TypeError: Path must be a string. Received {}'

如果任一路径片段不是一个字符串,则抛出 TypeError

path.normalize(path)

新增于: v0.1.23

path.normalize() 方法会规范化给定的 path,并解析 '..' 和 '.' 片段。

当发现多个连续的路径分隔符时(如 POSIX 上的 / 与 Windows 上的 \ 或 /),它们会被单个的路径分隔符(POSIX 上是 /,Windows 上是 \)替换。 末尾的多个分隔符会被保留。

如果 path 是一个长度为零的字符串,则返回 '.',表示当前工作目录。

例如,在 POSIX 上:

path.normalize('/foo/bar//baz/asdf/quux/..');// 返回: '/foo/bar/baz/asdf'

在 Windows 上:

path.normalize('C:\\temp\\\\foo\\bar\\..\\');// 返回: 'C:\\temp\\foo\\'

Since Windows recognizes multiple path separators, both separators will be replaced by instances of the Windows preferred separator (\):

path.win32.normalize('C:////temp\\\\/\\/\\/foo/bar');// Returns: 'C:\\temp\\foo\\bar'

如果 path 不是一个字符串,则抛出 TypeError

path.resolve([...paths])

新增于: v0.3.4

path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。

给定的路径的序列是从右往左被处理的,后面每个 path 被依次解析,直到构造完成一个绝对路径。 例如,给定的路径片段的序列为:/foo、/bar、baz,则调用 path.resolve('/foo', '/bar', 'baz') 会返回 /bar/baz。

如果处理完全部给定的 path 片段后还未生成一个绝对路径,则当前工作目录会被用上。

生成的路径是规范化后的,且末尾的斜杠会被删除,除非路径被解析为根目录。

长度为零的 path 片段会被忽略。

如果没有传入 path 片段,则 path.resolve() 会返回当前工作目录的绝对路径。

例子:

path.resolve('/foo/bar', './baz');// 返回: '/foo/bar/baz'

path.resolve('/foo/bar', '/tmp/file/');// 返回: '/tmp/file'

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');// 如果当前工作目录为 /home/myself/node,// 则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'

 

webpack4重新梳理一下2的更多相关文章

  1. webpack4重新梳理一下

    webpack安装和使用 mkdir webpack_demo cd webpack_demo //npm初始化 npm init //然后一直回车 安装webpack // 不建议全局安装 cnpm ...

  2. webpack4 从零学习常用配置梳理

    webpack 的核心价值就是前端源码的打包,即将前端源码中每一个文件(无论任何类型)都当做一个 pack ,然后分析依赖,将其最终打包出线上运行的代码.webpack 的四个核心部分 entry 规 ...

  3. webpack4.16压缩打包

    webpack4.16压缩打包 本文所用插件版本如下: nodejs:v8.11.3; npm:5.6.0 webpack:4.16 webpack的更新速度很快,差不多几个月就会出一版,最新的4系列 ...

  4. 【初码干货】在Window Server 2016中使用Web Deploy方式发布.NET Web应用的重新梳理

    在学习和工作的过程中,发现很多同事.朋友,在做.NET Web应用发布的时候,依然在走 生成-复制到服务器 这样的方式,稍微高级一点的,就是先发布到本地,再上传到服务器 这种方式不仅效率低下,而且不易 ...

  5. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  6. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  7. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  8. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  9. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

随机推荐

  1. C++中的关键字用法--- 四种强制类型转换的总结

    四种强制类型转换的总结(const_cast.static_cast.dynamic_cast.reinterpreter_cast 1. C风格的强制类型转换(Type Cast)很简单,不管什么类 ...

  2. 探求Floyd算法的动态规划本质

    Floyd–Warshall(简称Floyd算法)是一种著名的解决任意两点间的最短路径(All Paris Shortest Paths,APSP)的算法.从表面上粗看,Floyd算法是一个非常简单的 ...

  3. 【图论】信手拈来的Prim,Kruskal和Dijkstra

    关于三个简单的图论算法 prim,dijkstra和kruskal三个图论的算法,初学者容易将他们搞混,所以放在一起了. prim和kruskal是最小生成树(MST)的算法,dijkstra是单源最 ...

  4. 安装及使用Eclipse Maven插件的经验

    Eclipse Maven插件的站点目前已经迁移到了Eclipse主站上:http://eclipse.org/m2e/ 其安装方法也非常简单,通过Eclipse访问下面的URL:http://dow ...

  5. ORACLE EBS xml publisher 报表输出字符字段前部"0"被EXCEL自动去掉问题

    http://www.cnblogs.com/lzsu1989/archive/2012/10/17/2728528.html   Oracle  EBS 提供多种报表的开发和输出形式,由于MS Ex ...

  6. Python中通过open()操作文件时的文件中文名乱码问题

    最近在用Python进行文件操作的时候,遇到创建中文文件名的乱码问题. Python默认是不支持中文的,一般我们在程序的开头加上#-*-coding:utf-8-*-来解决这个问题,但是在我用open ...

  7. TFS 2017 培训 - 北京某银行科技部Java研发团队

    今天受邀和微软公司的朋友一起,为北京某银行科技部的两个Java研发团队做了一场TFS系统的技术培训. 按照需求分析>开发>编译>发布>测试的流程为研发团队做了全流程的介绍. 这 ...

  8. 使用ABP框架踩过的坑系列5

    DDD领域驱动开发,实际是为复杂的业务场景而生的,为了让开发人员专注于业务,而操作系统.数据库.网络之类的技术细节,必须要持久透明化:实际就是数据库系统DBMS的ORM抽象,目标就是业务不需要考虑数据 ...

  9. C# winform程序实现开机自启动,并且识别是开机启动还是双击启动

    开机启动程序,在很多场合都会用到,尤其是那种在后台运行的程序. 效果图: 以上两幅图都用到了命令行启动程序,为了模拟开机启动或者其他程序调用此程序. 第一幅图:程序启动可以根据不同参数,执行不同的操作 ...

  10. 为控件动态添加Style

    此文可解决:  重写控件时,给控件加入子控件或父控件的样式切换问题. 很灵活的可以根据不同内容显示不同样式 子控件作用在: <DataTemplate x:Key="ColmunHea ...