Webpack学习
一、Webpack是什么
Webpack是基于模块化打包的⼯具。
1. 模块化:
- 模块化:将大的文件拆分成互相依赖的小文件,再进行通一的拼装和加载;
- JS的模块化:利用Webpack+babel的模式将所有模块系统进行打包,同步加载,也可以搭乘多个chunk异步加载;
- CSS的模块化:sass、less等预处理器虽然实现了css的拆分,但是没有解决模块化很重要的全局污染问题。被认可的方案是css modules,利用浏览器的script标签,type类型选modules类型即可。所有的css文件由js管理,例如vue中的scope。
- 资源的模块化:任何资源都可以模块化
- 模块化的优点:
- 目录结构清晰化;资源处理集成化;项目依赖单一化
Webpack最核心的功能就是让我们可以进行模块化开发,js、css、图片、json等在webpack中都可以被当做模块来使用。
2. 打包:
- 打包就是利用webpack把各种资源合成一个或者多个包(bundle);
- 在打包的过程中,可以对资源进行处理,例如:压缩图片、将scss转换成css、将es6语法转成es5语法、将ts转成js等等;
二、Webpack的使用
1. 打包命令
webpack 被打包文件(入口文件) 打包之后的文件(出口文件) --mode=development(production)
// 其中development表示开发环境,production表示生产环境
2. 配置webpack.config.js文件
每次打包都要写入口文件和出口文件非常麻烦,这时候可以配置webpack.config.js文件,运行时候直接读取:
const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }
三、Webpack的loader
1. loader的使用过程
- 步骤一:通过npm安装需要使用的loader
- 步骤二:在webpack.config.js文件中的modules关键字下进行配置
const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: 'dist/' }, module: { rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'], }, { test: /\.less$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }, ] // 将 Less 编译为 CSS }, { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, // 小于limit,就用base64编码 name: 'img/[name].[hash:8].[ext]' } }] }, { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { // presets: ['@babel/preset-env'] presets: ['es2015'] } } }, ], }, }
2. css-loader:加载css文件,但是不负责将css样式嵌入到文档中
3. style-loader:把css代码注入到js代码中,通过dom操作加载css样式
注意: use: ['style-loader', 'css-loader']的顺序,因为webpack读取是从右到左读取的,要先使用css-loader加载再使用style-loader嵌入。
4. less-loader:将.less文件转换成.css文件
5. url-loader:在文件小于limit的情况下以base64的方式把文件内容注入到代码中
6. file-loader:把⽂件输出到⼀个⽂件夹中
{ test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192, // 小于limit,就用base64编码 name: 'img/[name].[hash:8].[ext]' } }] },
图片文件处理:
name: 'img/[name].[hash:8].[ext]' // img:文件要打包到的文件夹 //name: 获取图片原来的名字 //hash8:为了防止图片名称冲突 //ext:使用图片原来的扩展名
7. babel-loader:把 ES6 转换成 ES5
四、常见的Plugin
1. BannerPlugin:添加版权声明
2. HtmlWebpackPlugin:打包html文件到dist文件夹中
3. uglifyjs-webpack-plugin:通过 UglifyES 压缩 ES6 代码
plugins: [ new webpack.BannerPlugin('最终版权归大家所有'), new HtmlWebpackPlugin({ template: 'index.html' }), new uglifyjsWebpackPlugin(), // new webpack.LoaderOptionsPlugin({ // options: { // devserver: { // minimize: true // } // } // }) ],
4. loader和plugin的区别:
作用不同:
- loader:主要用于转换某些类型的模块,是一个转换器;
- plugin:插件,对webpack本身的扩展,是一个扩展器
用法不同:
- loader:在 module.rules 中配置,也就是说他作为模块的解析规则⽽存在。 类型为数组,每⼀项都是⼀个 Object ,⾥⾯描述了对于什么类型的⽂件( test ),使⽤什么加载 ( loader ) 和使⽤的参数( options );
- plugin:在 plugins 中单独配置。 类型为数组,每⼀项是⼀个 plugin 的实例,参数都通过构造函数传⼊。
五、使用Webpack优化项目
- 对于 Webpack4,打包项目使用 production 模式,这样会自动开启代码压缩
- 使用 ES6 模块来开启 tree shaking,这个技术可以移除没有使用的代码
- 优化图片,对于小图可以使用 base64 的方式写入文件中
- 按照路由拆分代码,实现按需加载
- 给打包出来的文件名添加哈希,实现浏览器缓存文件