Webpack4入门系列(一)
栏目: JavaScript · 发布时间: 5年前
内容简介:webpack是现代JavaScript应用的静态打包工具。当webpack处理应用时,它内部会生成一个映射你项目需要的每个模块的依赖图,并生成一个或多个包。自从版本4.0.0后,webpack不需要配置文件就能打包你的项目,然而如果有需要,它也是极易配置的。要开始使用你只需要理解它的核心概念:
webpack是现代JavaScript应用的静态打包工具。当webpack处理应用时,它内部会生成一个映射你项目需要的每个模块的依赖图,并生成一个或多个包。
自从版本4.0.0后,webpack不需要配置文件就能打包你的项目,然而如果有需要,它也是极易配置的。
要开始使用你只需要理解它的核心概念:
- Entry
- Output
- Loaders
- Plugins
- Mode
- Browser Compatibility
这篇文档旨在提供一个这些概念的全局预览,也会提供跟概念详情相关的使用示例。
Entry
入口用来指示webpack从哪个模块开始生成它的内部依赖图。webpack将会分析出入口会依赖哪些其他的模块和库(直接或间接)。
默认情况下值为 ./src/index.js
,但你可以通过配置webpack配置文件中的 entry
属性来设置一个不同的值(或多个入口)。
webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js' } 复制代码
Output
output属性告诉webpack将打包出的文件放置在哪里以及怎样命名这些文件。生成的主文件默认是 ./dist/main.js
,其他生成的文件放在 ./dist
目录下。
你可以在配置文件中指定 output
属性来配置这些值:
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' } }; 复制代码
在上面的例子中,我们使用 output.filename
和 out.path
属性告诉webpack我们的包名和我们要将它放置的地方。你可能在想顶部导入的path模块是做什么用的,它是一个核心Node.js模块,用来操作文件路径。
Loaders
不借助其他东西,webpack只能理解JavaScript和JSON文件, Loaders 允许webpack处理其他类型的文件,并把他们转换成能被你的应用使用的合法模块,并添加到依赖图中。
在较高层次上看,在配置文件中 loaders 有两个属性:
test use
webpack.config.js
const path = require('path'); module.exports = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; 复制代码
上面的配置为一个单独的模块定义了一个 rules
属性,并有两个必要属性: test
和 use
。这告诉webpack以下内容:
"嘿,webpack编译器,当你遇到在 require()/import
声明中有以'.txt'结尾的文件路径时,在将它加入到bundle中之前先使用 raw-loader
来转化一下。"
Plugins
loaders可以用来转换一个特定类型的模块,而plugins可以用来做更加广泛的任务,比如包优化,资源管理和环境变量的注入。
要使用plugin,你需要 require()
它并将它加入到 plugins
数组中。大多数插件都可以使用options来自定义。因为你需要在配置文件的不同地方使用插件多次,所以你需要通过 new
操作符来构造一个实例。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm const webpack = require('webpack'); //to access built-in plugins module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; 复制代码
上面的例子中, html-webpack-plugin
会在你的应用中生成一个HTML文件,并将你所有生成的包文件都自动注入进去。
在你的webpack文件中使用plugins是非常直接的,然而也有很多需要更多探索的使用实例。可以在这里查看。
Mode
将 mode
参数设置为 development
, production
或 none
, 就可以开启针对各个环境内置的优化。默认值为 production
。
module.exports = { mode: 'production' }; 复制代码
Browser Compatibility
webpack支持所有兼容ES5的浏览器(IE8及以下版本不支持)。webpack需要 Promise
来支持 import()
和 require.ensure()
。如果你需要支持更老的浏览器,你需要在使用这些表达式之前加载一个polyfill。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Little Schemer - 4th Edition
Daniel P. Friedman、Matthias Felleisen / The MIT Press / 1995-12-21 / USD 40.00
This delightful book leads you through the basic elements of programming in Scheme (a Lisp dialect) via a series of dialogues with well-chosen questions and exercises. Besides teaching Scheme, The Lit......一起来看看 《The Little Schemer - 4th Edition》 这本书的介绍吧!