-

webpack4知识点总结归纳

WEB前端

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.leixuesong.com/tag/html">HTML</a> 文件, 将所有 webpack 包插入 到body下的script 标签中。
]
};

Mode(模式)
Mode:区分开发环境和生成环境,这个很简单,只有两种,development开发模式和production生产模式。

在雷雪松看来,如果你掌握了《webpack4知识点总结归纳》里面的内容,你就基本入门了,可以对照这webpack官网学习更多知识。

来源:webpack4知识点总结归纳

webpack4知识点总结归纳” 评论

    repostone 评论:
    2019年10月4日 下午4:29

    非技术的路过。

发表评论

电子邮件地址不会被公开。 必填项已用*标注