上一篇已经实现了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、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路 径正确,然后再试一次。 所在位置 行:1 字符: 1 + 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'