今天工作比较轻松,所以打算抽空看看webpack。说起 webpack ,我是熟悉又陌生。因为平时写react的时候会用到npm eject来看webpack配置,但是基本上是有问题了就搜索一下,偶尔会修改一些配置信息,从没有全面了解过这方面信息,现在正好来看看。
本质上,webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时,它会在内部构建一个依赖图,此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
webpack主要是通过 webpack.config.js 这个文件来进行构建,通过一些属性对整个打包的过程进行控制,我们常用的属性有,入口(entry),输出(output),文件处理(loader),插件(plugin),模式(mode)几种
1.入口(entry)
正如字面意思一样,我们打包的时候需要选取一个文件作为我们打包的起点,例如
1 //webpack.config.js 2 module.exports = { 3 entry: './path/to/my/entry/file.js', 4 };
如果不设置的话,默认打包路径是 ./src/index 。
入口可以支持多选,多个入口可以通过数组或者对象的方式进行打包,示例如下:
//数组方法 module.exports={ entry: ['./src/file_1.js', './src/file_2.js'] } //对象方法 module.exports={ entry: { a2: 'dependingfile.js', b2: 'dependingfile1.js'
, }, }
本来想介绍下对象方法配置的的细则,结果试验了一下好像提示报错,所以暂时不把方法列出来了。
2.输出( output )
既然我们是打包,肯定有一个完成品所以我们需要设定打包的位置,基础配置为
1 module.exports = { 2 output: { 3 filename: 'bundle.js', 4 }, 5 }; 6 //此配置将一个单独的 bundle.js 文件输出到 dist 目录中。
当有多个入口的时候,输出文件的名称不能固定为一个值,我们要写成占位符格式
1 module.exports = { 2 entry: { 3 app: './src/app.js', 4 search: './src/search.js', 5 }, 6 output: { 7 filename: '[name].js', 8 path: __dirname + '/dist', 9 }, 10 }; 11 12 // 写入到硬盘:./dist/app.js, ./dist/search.js
3.loader
我们在打包的过程中,不仅仅是把所有文件整合到一起的简单过程,还涉及到对于不同文件进行转译并格式化的过程。比如我们的react用的是jsx,不能直接在js中使用,我们需要提前准备好loader转移成js后再打包,下面是几个常用的roader种类
module.exports = { entry: './main.jsx', output: { filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['es2015', 'react'] } } } ] } };
4.插件(plugin)
loader是让我们对于不同文件打包时进行转译配置,而插件是在打包的流程中进行更多操作。
其中包括:打包优化,资源管理,注入环境变量。下边是一个简单的使用方式:
1 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 2 const webpack = require('webpack'); // 访问内置的插件 3 const path = require('path'); 4 5 module.exports = { 6 entry: './path/to/my/entry/file.js', 7 output: { 8 filename: 'my-first-webpack.bundle.js', 9 path: path.resolve(__dirname, 'dist'), 10 }, 11 module: { 12 rules: [ 13 { 14 test: /\.(js|jsx)$/, 15 use: 'babel-loader', 16 }, 17 ], 18 }, 19 plugins: [ 20 new webpack.ProgressPlugin(), 21 new HtmlWebpackPlugin({ template: './src/index.html' }), 22 ], 23 }; 24 //ProgressPlugin 用于自定义编译过程中的进度报告,
//HtmlWebpackPlugin 将生成一个 HTML 文件,并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。
5.模式(mode)
通过选择 development
, production
或 none
之中的一个,来设置 mode
参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production
。
module.exports = { mode: 'production', };
今日份总结就到这里了,明天可以再补充一点,加油,我自己!
最后附上链接 资料来源
原文地址:https://www.cnblogs.com/songluming/p/14443902.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。