和我一起学习Webpack4.0(二) —— Webpack核心
一、Loader
1.什么是Loader?
Loader是一种打包方案,webpack不知道除了.js后缀结尾的其他文件该怎么打包,所以要使用Loader来告诉webpack。
要使用Loader首先要进行安装,然后在webpack.config.js里进行配置,类似这样:
npm install url-loader -D
const path = require('path'); module.exports = { mode: 'production', entry: './index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, modules: { rules: [{ test: /\.png$/, use: 'url-loader' }] } };
2.图片打包(file-loader, url-loader)
file-loader的作用是将文件进行处理后,移动到打包后的文件夹中。一般用来处理图片文件。
url-loader相当于file-loader的升级版,可以将图片地址用base64的形式返回。
首先安装:
npm install file-loader url-loader -D
配置webpack.config.js:
module: { rules: [{ test: /\.png$/, loader: 'url-loader', options: { limit: 10000, name: '[name]-[hash].[ext]', outputPath: 'image/' } }] }
这个示例是指匹配以.png结尾的文件,使用url-loader,limit代表小于这个byte的图片将打包为base64并直接插入js代码中,而大于这个值的图片将以文件的形式打包到指定文件夹。name配置指的是以什么形式显示打包后的文件夹名,有很多配置项可在官网中查看,[name]是指原文件名,[hash]是哈希值,[ext]是原后缀名。outputPath就是打包后的指定位置。
3.样式打包(css-loader, style-loader)
css-loader的作用是分析各个css文件间的关系,然后合并成一个css。
style-loader的作用是将这个处理后的css挂载到页面的head里。
安装:
npm install css-loader style-loader -D
配置webpack.config.js:
module: { rules: [{ test: /\.css$/, loader: ['style-loader', 'css-loader'] }] }
如果项目中用到sass、less、stylus等css扩展语言,以sass为例,则需要安装sass-loader,node-sass:
npm install sass-loader node-sass -D
配置webpack.config.js:
module: { rules: [{ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] }] }
在webpack的配置中,loader是有执行顺序的,从右到左(或从下到上)依次执行,首先由sass-loader将sass转为css,然后css-loader处理css文件间的关系,最后由style-loader挂载到页面中。
4.字体打包(file-loader, url-loader)
字体打包的过程和图片非常类似,只是稍微改一下配置就可以了:
module: { rules: [{ test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/, loader: 'url-loader' }] }
二、Plugins
Plugins可以在webpack运行到某一时刻的时候,帮我们做一些事情。
1.Html-webpack-plugin
我们每次打包的时候,入口的html文件并没有被打包到指定文件夹中,所以我们需要借助这个plugins来帮我们做这件事。
npm install html-webpack-plugin -D
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [{ test: /\.png$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]' } },{ test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },{ test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/, loader: 'url-loader' }] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' }) ] };
如果指定template就会把原本的html加入一个script标签然后打包,如果不指定这个plugins就会在打包后的文件夹中自动生成一个html文件。
2.clean-webpack-plugin
这个plugin可以在打包前把旧的打包文件夹删除掉。
npm install clean-webpack-plugin -D
plugins: [ new HtmlWebpackPlugin({ template: './index.html' }), new CleanWebpackPlugin() ]