内容简介:entry 指示 webpack 应该使用哪个模块开始构建其内部依赖关系图。entry 的 默认值是 ./src/index.js。可以在 webpack.config.js(webpack 的配置文件)里自定义。
webpack 文档阅读笔记 20190523
webupack 六个主要的概念
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
Entry
entry 指示 webpack 应该使用哪个模块开始构建其内部依赖关系图。
entry 的 默认值是 ./src/index.js。
可以在 webpack.config.js(webpack 的配置文件)里自定义。
// webpack.config.js module.exports = { entry: './path/to/my/entry/file.js' }
Output
output 告诉 webpack 在何处派发出它创建的包,以及如何命名这些文件。
output 的默认值 是 ./dist/main.js
可以在 webpack.config.js(webpack 的配置文件)里自定义。
// webpack.config.js 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' } };
Loaders
webpack 只能解析 JavaScript 和 JSON 文件。
Loader 允许 webpack 处理其他类型的文件,并将它们转换为可由应用程序使用并添加到依赖关系图中的有效模块。
loaders 在 webpack 配置里有两个属性:
- test 属性标识应该转换哪个或哪些文件
- use 属性指示应该使用哪个 loader 进行转换。
// webpack.config.js const path = require('path'); module.exports = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.jsx?$/, use: 'babel-loader' } ] } };
Plugins
虽然 loader 用于转换某些类型的模块,但是可以利用插件执行更广泛的任务,比如包优化、资产管理和环境变量注入。
// webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };
html-webpack-plugin 这个插件的用途是 为应用程序自动生成 html 文件,并且自动注入。
Mode
通过将 mode 参数设置为 development、production 或 none,你可以启用与每个环境相对应的 webpack 内置优化。 默认值是 production。
mode
- production
- development
- none
// webpack.config.js module.exports = { mode: 'production' // mode default value is 'production' };
// npm command line in Webpack Cli webpack --mode=production
Browser Compatibility
浏览器兼容
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- MongoDB学习笔记:文档
- InnoDB文档笔记(一)
- js文档笔记2——标准库
- 关于 iOS 集合官方文档的一份小笔记
- 提升写文档和解决问题的能力:《金字塔原理》读书笔记
- GO语言学习笔记(二)IDE安装与配置、格式化代码、生成代码文档
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。