使用webpack 4打包项目—进阶篇之loader
文章目录
- 使用webpack 4打包项目---进阶篇之loader
- 1. html-webpack-plugin
- 2. 处理样式的loader包
- 2.1 css-loader
- 2.2 less-loader
- 2.3 sass-loader
- 3. 处理url的loader
- 3.1 url-loader
- 4. 转义ES6+的loader
上一篇webpack基础篇
这篇文章主要讲一下webpack中一些包的用法。
1. html-webpack-plugin
-
这个包可以使我们，自动在内存中根据指定页面生成内存的页面，然后在页面上加载的时候显示内存后脏的页面。
-
并且它还会将我们打包好的bundle.js自动插入到html中，因此这样我们就不需要自己在index.html中手动的引入bundle.js.
-
下载这个包
npm i html-webpack-plugin -D -
在webpack.config.js 做出如下配置，插件在 plugins 配置对象中new 出来这个构造函数，传入配置对象就ok了，这个filename和template的文件名需要一致。
const path = require('path')
const htmlWebpackPlugins = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
mode: 'development',
plugins: [
new htmlWebpackPlugins({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
})
],
}
webpack, 默认只能打包处理JS类型的文件,无法处理其它的非JS类型的文件，因此我们如果需要打包其他类型的文件（样式，图片等）需要依赖一些loader包。
2. 处理样式的loader包
2.1 css-loader
下载
npm i style-loader css-loader -D
然后在webpack.config.js中配置如下
module: {
rules: [
//配置处理.css文件第三方loader规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
test中匹配的使用的是正则
2.2 less-loader
npm i less less-loader -D
module: {
rules: [
//配置处理.less文件第三方loader规则
{ test : /\.less$/, use: ['style-loader','css-loader', 'less-loader']}
]
}
2.3 sass-loader
cnpm i sass-loader node-sass -D
这里强调一下 为啥这个用的使cnpm，npm和yarn这里下载不下来，换源不知为什么也不行。
module: {
rules: [
//配置处理.scss文件第三方loader规则
{ test : /\.scss$/, use: ['style-loader','css-loader', 'sass-loader']}
]
}
3. 处理url的loader
3.1 url-loader
我们在样式中用一些背景图 这个时候就使用到了url 例如 backgroun-imgage: url('')这种webpac也是无法打包的，需要我们安装依赖
npm i url-loader file-loader -D
在配置文件中除左如下配置
module: {
rules: [
{ test : /\.(jpg|png|gif|jpeg|bmp|PNG)$/, use: 'url-loader'}
]
}
这里的图片在页面上显示默认会转成base64编码的，如果不想让他转的话可以在url-loader?limit=123
注意这个limit的这个值必须小于图片的原大小才能不适用base64编码，并且你会发现图片的名称不一样了，这个是因为为了防止图片重名，当然这个也是可以设置的url-loader?limit=123&name=[name].[ext] 就行了,
这个ext是保证后缀名一致。这样的话项目中如果有两个名称一样的图片，在页面两张图片会显示成一样的，如果我们又想使用名称又想，不一样我们可以这样 limit=123&name=[hash:8]-[name].[ext]
{ test : /\.(jpg|png|gif|jpeg|bmp|PNG)$/, use: 'url-loader?limit=12170&name=[hash:8]-[name].[ext]'}
这个就是在他们名称前面拼接了8位的hash值。
这个是webpack4写法
{
test: /\.(jpg|png|gif|jpeg|bmp|PNG)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
除此意外呢 这个url-loader还能处理字体文件的加载，只需要加一个配置就行了。
4. 转义ES6+的loader
main.js
class Test {
static info = { name: 'zs', age: 20}
}
console.log(Test.info)
例如上面的示例，这里我们用到的是babel-loader
最新的webpack4和新版的babel-loader根以前的不太一样注意安装的版本和配套使用。
npm i babel-loader@8 @babel/core @babel/preset-env
接下来下载这个包是转义一些js的新特新，比如es6中类的一些语法。
官方文档 这里面具体有那些语法需要用这个包
当然你如果并没有用到这些es6特性这个包也不用装。
npm i @babel/plugin-proposal-class-properties -D
我这里这个包版本是7.83的。
然后再webpack.config.js中配置如下
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
这样就配置好了。
上一篇webpack基础篇
