webpack学习笔记(1)--webpack.config.js
主要的信息都是来自于下方所示的网站
https://webpack.docschina.org/configuration
从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项目。然而,webpack 仍然还是高度可配置的 ,并且能够很好的满足需求。
首先总结下个人理解的,webpack 是一个js的应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle。有以下几个优点
- 1.能将多个资源打包成一个或者较少的文件,后续的http交互时,请求数量可能会减少,增加响应速度
- 2.能将资源转化为最适合浏览器的格式,提升应用的性能,只去引用被应用使用的资源,如懒加载资源 (只在需要的时候才加载相应的资源)
- 3.提供了很重要的实时加载和热加载的功能,节省了开发时间
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 输出文件所在目录
上一篇: Windows用户使用Safari非法
下一篇: CSS之页面元素飞入效果