主要的信息都是来自于下方所示的网站
https://webpack.docschina.org/configuration
从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项目。然而,webpack 仍然还是高度可配置的 ,并且能够很好的满足需求。
首先总结下个人理解的,webpack 是一个js的应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle。有以下几个优点
1 entry 入口
entry point 用来指示使用哪个模块来作为构建其内部依赖图的开始, 默认是./src/index.js,可以配置一个或多个入口
例如多个入口:
'''
entry: {
app: './src/index.js',
showlog: './src/showlog.js'
},
'''
单个文件可以写成:
module.exports = { entry: { main: './path/to/my/entry/file.js' } };
简写:
module.exports = { entry: './path/to/my/entry/file.js' };
2 output 出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,主输出文件默认为 ./dist/main.js
,其他生成文件的默认输出目录是 ./dist
。
const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } };
上面的示例,通过 output.filename
和 output.path
属性,来告诉 webpack bundle 的名称,以及我们想要 bundle 生成(emit)到哪里。output只可以指定一个输出的配置
output.filename 输出文件名
output.path 输出文件所在目录
如对本文有疑问, 点击进行留言回复!!
通过 JQuery 的 each方法 获取Div下所有的P标签的内容并使用 push方法保存为数组
前端进阶必读:《JavaScript核心技术开发解密》核心提炼二
Vue $listener 和 .native 修饰符 示例详解
网友评论