上期回顾: 从0搭建本身的webpack开发环境(一)javascript
loader
主要是用于把模块原内容按照需求转换成新内容,以便用来加载非 JS 模块!
经过使用不一样的loader
,Webpack
能够把不一样的文件都转成JS文件,好比CSS、ES6/七、JSX等。css
让咱们来看看这些必需要掌握的loader!html
默认loader
的执行顺序是从下到上、*从右向左,固然执行顺序也能够手动定义,接下来咱们依次介绍常见的loader
,来感觉loader
的魅力!java
咱们基于这个基础配置来继续编写:node
const path = require("path");
const dev = require("./webpack.dev");
const prod = require("./webpack.prod");
const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const base = {
entry:'./src/index.js',
output: {
filename: "[name].js",
path: path.resolve(__dirname, "../dist")
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, "../public/template.html"),
hash: true,
minify: {
removeAttributeQuotes: true
}
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [path.resolve('xxxx/*'),'**/*'],
}),
]
};
module.exports = env => {
if (env.development) {
return merge(base, dev);
} else {
return merge(base, prod);
}
};
复制代码
咱们在js
文件中引入css样式!webpack
import './index.css';
复制代码
再次执行打包时,会提示css没法解析git
ERROR in ./src/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
复制代码
这个时候须要安装loadergithub
npm install style-loader css-loader --save-dev
复制代码
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
复制代码
默认只在打包时进行样式抽离web
module.exports = env => {
let isDev = env.development;
const base = {/*source...*/}
if (isDev) {
return merge(base, dev);
} else {
return merge(base, prod);
}
};
复制代码
安装抽离插件正则表达式
npm install mini-css-extract-plugin --save-dev
复制代码
配置抽离插件
{
test: /\.css$/,
use: [
!isDev && MiniCssExtractPlugin.loader,
isDev && 'style-loader',
"css-loader"
].filter(Boolean)
}
!isDev && new MiniCssExtractPlugin({
filename: "css/[name].css"
})
复制代码
最终文件配置贴一下:
const path = require("path");
const dev = require("./webpack.dev");
const prod = require("./webpack.prod");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = env => {
let isDev = env.development;
const base = {
entry: "./src/index.js",
output: {
filename: "[name].js",
path: path.resolve(__dirname, "../dist")
},
module: {
rules: [
{
test: /\.css$/,
use: [
!isDev && MiniCssExtractPlugin.loader,
isDev && 'style-loader',
"css-loader"
].filter(Boolean)
}
]
},
plugins:[
!isDev && new MiniCssExtractPlugin({
filename: "css/[name].css"
}),
new HtmlWebpackPlugin({
filename: "index.html",
template: path.resolve(__dirname, "../public/template.html"),
hash: true,
minify: {
removeAttributeQuotes: true
}
}),
].filter(Boolean)
};
if (isDev) {
return merge(base, dev);
} else {
return merge(base, prod);
}
};
复制代码
不一样的css预处理器
要安装不一样的loader来进行解析
使用sass
{
test:/\.scss$/,
use:[
!isDev && MiniCssExtractPlugin.loader,
isDev && 'style-loader',
"css-loader",
"sass-loader"
].filter(Boolean)
}
复制代码
在css文件中可能会使用@import
语法引用css
文件,被引用的css
文件中可能还会导入scss
{
test: /\.css$/,
use: [
!isDev && MiniCssExtractPlugin.loader,
isDev && 'style-loader',
{
loader:"css-loader",
options:{
importLoaders:1 // 引入的文件须要调用sass-loader来处理
}
},
"sass-loader"
].filter(Boolean)
},
复制代码
使用postcss-loader
增长样式前缀
npm install postcss-loader autoprefixer
复制代码
在处理css前先增长前缀
{
test: /\.css$/,
use: [
!isDev && MiniCssExtractPlugin.loader,
isDev && 'style-loader',
{
loader:"css-loader",
options:{
importLoaders:2 // 引入的文件须要调用sass-loader来处理
}
},
{
loader:"postcss-loader",
options:{
plugins:[require('autoprefixer')]
}
},
{
loader:"postcss-loader",
options:{
plugins:[require('autoprefixer')]
}
},
"sass-loader"
].filter(Boolean)
},
复制代码
或者也能够建立postcss
的配置文件postcss.config.js
module.exports = {
plugins:[
require('autoprefixer')
]
}
复制代码
能够配置浏览器的兼容性范围 .browserslistrc
cover 99.5%
复制代码
在生产环境下咱们须要压缩css
文件,配置minimizer
选项,安装压缩插件
npm i optimize-css-assets-webpack-plugin terser-webpack-plugin --save-dev
复制代码
在webpack.prod.js
文件中配置压缩
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
optimization:{
minimizer:[new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
}
复制代码
咱们能够合理的使用hash
戳,进行文件的缓存
!isDev && new MiniCssExtractPlugin({
filename: "css/[name].[contentHash].css"
})
复制代码
import logo from './webpack.png';
let img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);
复制代码
使用file-loader
,会将图片进行打包,并将打包后的路径返回
{
test:/\.jpe?g|png|gif/,
use:{
loader:'file-loader',
options:{
name:`img/[name].[ext]`
}
}
}
复制代码
二进制文件也是使用file-loader
来打包
{
test:/woff|ttf|eot|svg|otf/,
use:{
loader:'file-loader'
}
}
复制代码
使用url-loader
将知足条件的图片转化成base64,不知足条件的url-loader
会自动调用file-loader
来进行处理
{
test:/\.jpe?g|png|gif/,
use:{
loader:'url-loader',
options:{
limit:100*1024,
name:`img/[name].[ext]`
}
}
}
复制代码
经过对loader的使用,咱们了解到loader能够把其余类型模块都处理成JS模块,以便加载使用。这其实就是webpack中很是重要的混淆依赖中的一部分。 下一篇文章咱们将一块儿来探讨如何解析处理JS模块,但愿你们继续关注和支持!