webpack-常用loader

于鹏_yuxiaoyu
721 阅读3分钟

今天来分享几个webpack常用的loader

LIST

安装 不建议全局安装 在项目安装 现在使用低版本的webpack还是很多的

npm i webpack webpack-cli -D

先来个最简单的 0配置webpack打包模块化语法js

// a.js
export default () => {
    console.log('a')
}
// b.js
export default () => {
    console.log('b')
}
// index.js
import a from './a'
import b from './b'
a()
b()

ps： npx命令 这个是webpack-cli里提供的命令 回到我们的node_moudles里去查找webpack
npx webpack -v可以先用这个命令看一下我们刚才安装的版本为4.44.1
接下来使用npx webpack index.js进行打包 我们在本地写个html文件引用下打包出来的dist/main.js，就可以正常输出了

引入img

我们在index.js中引入一张图片

// index.js
import a from './a'
import b from './b'
const img = require('./img.png')
a()
b()

我们再执行打包的时候会看到报错 webpack用于模块打包 默认只认识js模块，支持模块语法 在引用其他类型的文件时就需要自定义配置文件了

webpack 配置文件

当我们使npx webpack index.js时，表示的是使用webpack处理打包，名为index.js的入口模块。默认放在当前目录下的dist文件夹，打包后的模块名称是main.js，当然我们也可以修改
webpack有默认的配置文件，叫webpack.config.js，我们可以对这个文件进行修改，进行个性化配置

我们创建一个webpack.config.js文件,放在根目录

const path = require('path')
module.exports = {
    entry: './index.js',
    // 也可以写成对象模式
    /*
    entry: {
        main: './index.js'
    }
    */
    output: {
        filename: 'build.js',
        // 使用绝对路径
        path: path.resolve(__dirname, 'dist')
    }
}

这个时候我们使用npx webpack命令就可以自动打包了，不需要指定后面的文件 因为他会自动查找配置文件里写的入口文件（记得把刚才require的图片删掉，要不会报错 一会处理）
打包后我们的dist文件夹下就会出现一个build.js文件。

  • entry 指定打包入口文件
  • output 指定打包出口文件

webpack loader

webpack是模块打包工具，而模块不仅仅是js，还可以是css，图片或者其他格式
但是webpack默认只知道如何处理js模块，那么其他格式的模块处理，和处理方式就需要loader

module: {
    rules: [
        {
            test:/\.xxx$/,
            use: {
                loader: 'xxx-loader'
            }
        }
    ]
}

当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到是什么格式的模块，使用什么loader来处理。

我们刚才在引入图片时候报错了就是因为webpack不认识png格式的文件，这个时候我们就要用到file-loader这个loader了

file-loader

原理是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称
场景:就是当我们需要模块，仅仅是从源代码挪移到打包目录，就可以使file-loader来处理，txt，svg，csv，excel，图片资源等等
使用loader之前首先要安装

npm install file-loader -D

// 修改webpack.config.js
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif)$/,
            use: {
                loader: 'file-loader'
            },
        }
    ]
}

这个时候我们再执行npx webpack 就可以正常编译了 我们的dist文件夹下面也会多出来一个文件名被混淆过后的图片
如果我们不想要被混淆可以配置一下options

// 修改webpack.config.js
module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            },
        }
    ]
}

这里使用到的[name][ext]是占位符，[name]是原文件的名称，[ext]是原文件的后缀名，包括还有[hash]是这次打包生成的hash，outputPath可以指定编译后的文件夹

url-loader

可以处理file-loader所有的事情，但是遇到图片模块，会把该图片转换成base64格式字符串，并打包到js里。对小体积的图片比较合适，大图片不合适。
`npm install url-loader -D`还是要先安装 
// 把file-loader文件改成url-loader
module: {
    rules: [
        {
         test: /\.(png|jpe?g|gif)$/,
         use: {
           loader: "url-loader",
            options: {
                name: "[name]_[hash].[ext]",
                outputPath: "images/", 
                limit: 2048 // 小于2048，才转换成base64
            }}
        }
    ]
},

css-loader

样式处理，需要安装两个loader
Css-loader 分析css模块之间的关系，并合成一个css
Style-loader 会把css-loader生成的内容，以style挂载到页面的head部分
`npm install style-loader css-loader -D`安装
``` // 在index.js中引入一个css ... // 增加loader配置 rules: [ ... { test: /\.css$/, use: ['style-loader', 'css-loader'], } ] ```

less-loader

我们可以使用less-loader去处理less文件
`npm install --save-dev less-loader less`安装 
// 在index.js中引入一个less
...
// 增加loader配置
rules: [
    ...
    {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
    }
]

loader有顺序，从右到左，从下到上

postcss-loader

自动补充css前缀的postcss-loader
npm i -D postcss-loader autoprefixer

// 我们需要在根目录下创建一个postcss.config.js文件
module.exports = {
    plugins: [require("autoprefixer")]
};
// 修改webpack.config.js文件
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
}

我们可以看到我们写的less和css文件都自动加了前缀

ps: 安装有时候会用-D或–save-dev 两个实际上是一个意思 开发依赖 -S –save 运行依赖

几种打包的命令

  • 默认的配置文件:webpack.config.js
npx webpack //执行命令后，webpack会找到默认的配置文件，并使用执行
  • 不使用默认的配置文件: webpackconfig.js
npx webpack --config webpackconfig.js //指定webpack使用webpackconfig.js文件来作为配置文件并执行
  • 修改package.json scripts字段:可以使用npm run来启动，我们也可以修改下
"scripts":{
    "build":"webpack"//这个地方不要添加npx ,因为npm run执行的命令，会优先使用项目工程里的包，效果和npx非常类似 
}

npm run build
avatar
文章
阅读
粉丝