单文件打包的命令
npx webpack index.js
但是当我们在项目文件夹中将所有文件一起打包该怎么处理呢?
项目文件目录
我们在项目中执行npx webpack index.js打包出一个dist文件里有一个maiin.js完全ok,这时我们思考为什么回打包出一个dist文件?
这是因为webpack团队为了我们使用方便给了我们一个默认的配置文件,默认输出的文件夹为dist文件夹。但是当我们项目整体打包时,webpack不知道我们的那个文件为入口文件,自然也就打不成包了。
自定义webpack配置文件webpack.config.js
webpack官网给我们指出webpack有四个核心概念即入口(entry),输出(output),loader,插件(plugins)。
image.png
这里我们先讲前两个核心概念入口和输出,了解他们如何在配置文件中配置。
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
entry
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
理解:webpack以那个文件为起始文件
output
output 属性告诉 webpack 在哪里输出它所创建的 bundles(我们修改为bundle.js),以及如何命名这些文件,默认值为 ./dist(如上我们修改为了bundle文件夹)。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程
注意:
使用path时需要引入一个node的核心模块‘path’,调用核心模块‘path’的resolve方法,传入变量__dirname(此变量指此配置文件所在目录),然后将此目录和bundle文件夹结合,即使用path.resolve(__dirname, 'bundle')来指定输出的文件夹。
如果我们不想以webpack.config.js为默认配置文怎么办?
比如我们将webpack.config.js文件修改为webpackconfig.js文件如何打包
此时我们只需要在打包的命令指定配置文件即可
npx webpack --config webpackconfig.js
如图,即可完成打包
指定配置文件打包
网友评论