webpack4知识点总结归纳
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),webpack4是webpack当前最新的主版本。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。。在我们做vue的项目时,对webpack一定不陌生,在使用es6语法,打包项目的时候都使用到webpack。下面雷雪松给大家总结归纳一下webpack4知识点。
在webpack中,所有的静态资源都可以被处理为一个模块,包括js文件、img图片、css样式、font字体。webpack里面有5个非常重要的概念:入口(Entry)、出口(Output)、Loader(加载器)、插件(Plugins)和mode模式。
Entry(入口)
Entry:定义 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。配置 entry 属性,来指定一个入口起点。
1 2 3 | module.exports = { entry: './path/to/my/entry/index.js' }; |
Output(出口)
Output: 定义 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件。
1 2 3 4 5 6 7 | module.exports = { entry: './path/to/my/entry/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'webpack.bundle.js' } }; |
Loader(加载器)
Loader:webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。webpack loader 被用于转换某些类型的模块。更多webpack官网推荐加载器列表。
在 webpack 的配置中 loader 有两个目标:
test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性,表示进行转换时,应该使用哪个 loader。
1 2 3 4 5 6 7 8 9 10 | module.exports = { output: { filename: 'webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' }// 加载文件原始内容(utf-8) ] } }; |
Plugins(插件)
Plugins:插件接口功能极其强大,可以用来处理各种各样的任务。比如:打包优化、压缩、重新定义环境中的变量。webpack Plugins 用于执行范围更广的任务。更多webpack官网推荐插件列表。
1 2 3 4 5 6 7 8 9 10 11 | const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) //该插件将为你生成一个 <a href="https://www.xuesongboke.cn/tag/html">HTML</a> 文件, 将所有 webpack 包插入 到body下的script 标签中。 ] }; |
Mode(模式)
Mode:区分开发环境和生成环境,这个很简单,只有两种,development开发模式和production生产模式。
在雷雪松看来,如果你掌握了《webpack4知识点总结归纳》里面的内容,你就基本入门了,可以对照这webpack官网学习更多知识。
2019年10月4日 下午4:29
非技术的路过。