search

swiftwind0405 / blog

my blog within git issues
9 stars 1 forks source link

【Webpack】常用 loaders 与配置 #39

Open swiftwind0405 opened 4 years ago

swiftwind0405 commented 4 years ago

常用 loaders

loader 的使用

loader 可以配置以下参数:

loader 是链式调用，所以执行顺序是从右到左的。

转换脚本语言

babel-loader

presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性，一个 Presets 对一组新语法特性提供支持，多个 Presets 可以叠加。 Presets 其实是一组 Plugins 的集合，每一个 Plugin 完成一个新语法的转换工作。Presets 是按照 ECMAScript 草案来组织的。

preset description
@babel/preset-env env 包含当前所有 ECMAScript 标准里的最新特性
@babel/preset-react 支持 React 开发中的 JSX 语法

需要安装：

//安装插件 --@babel/core是babel核心库
npm install babel-loader @babel/core -D

//同时要按装，babel-loader只是打通webpack的一个桥梁，并不会转义代码，需要借助@babel/preset-env 来做语法的转换
npm install @babel/preset-env -D

//还有继续安装@babel/polyfill -- 作用是帮助低版本的浏览器弥补缺失的变量以及函数，同时可以在options配置，根据业务代码来做低版本的缺失弥补，这样打包代码可以做到精简，注意的是，这个插件只适合做业务代码带包，因为会污染全局
npm install @babel/polyfill -D

1.配置 .babelrc

weback.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    }
};

项目根目录下增加 .babelrc 配置文件 .babelrc

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

2. 直接配置在 babel-loader 中

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    }
};

样式文件的转换

css最基本的编译要依靠于style-loader、css-loader这两个加载器，所谓最基本，就是在不考虑使用css预处理器以及css后处理器的情况。预处理器包括less、scss、sass、stylus，后处理器如postcss的autoprefixer等。首先我们先弄明白各加载器的作用：

css-loader

webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }
  ];
}

style-loader

postcss-loader

autoprefixer 是 css 后处理器 postcs s提供的一个对 css3 中个别属性在不同浏览器下需要添加浏览器前缀的样式处理工具，因此在使用 autoprefixer 之前，我们需要安装 postcss-loader 来加载它。

webpack.config.js

module: {
        rules: [{
            test: /\.css$/,
            use: [
                { loader: "style-loader" },
                { loader: "css-loader",options: { importLoaders: 1 } },//importLoaders解决由于css-loader处理文件导入的方式导致postcss-loader不能正常使用的问题
                { loader: "postcss-loader" } //指定postcss加载器
            ],
            exclude: /node_modules/
        }]
    }

根目录下新建 postcss.config.js 配置文件：

module.exports = {
    plugins: [
        require("autoprefixer")({overrideBrowserslist:'last 5 version'}) // overrideBrowserslist最终生成的css兼容最近的N个版本
    ]
}

需要注意，由于css-loader处理文件导入的方式，因此加载器postcss-loader不能与CSS模块一起使用。 为了使它们正常工作，可以添加 css-loader 的importLoaders选项。

也可以直接写在loader里：

{ loader: 'postcss-loader', options: { plugins: loader => [ require('autoprefixer')({overrideBrowserslist: "last 5 version"}) ] } }
module.exports = {
    module: {
        rules: [
            {
                test: /\.less/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
};

loader配置的顺序不可调换，因为 less-loader 是把 less 转换成 css，而 css-loader 是解析处理 css 里的 url 路径，并将 css 文件转换成一个模块，style-loader 是将 css 文件变成 style 标签插入到 head 中。

如果要转换 less 或者 sass，那么除了 loader，还需要安装 less 或者 sass：

npm install less less-loader -D

分离 css 文件

安装 mini-css-extract-plugin，将 'style-loader' 修改为 {loader: MiniCssExtractPlugin.loader}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.less/,
                use: [{loader: MiniCssExtractPlugin.loader}, 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
};

此插件为每个包含 CSS 的 JS 文件创建一个单独的 CSS 文件，并支持 CSS 和 SourceMap 的按需加载。 注意：这里说的每个包含 CSS 的 JS 文件，并不是说组件对应的 JS 文件，而是打包之后的 JS 文件.

加载文件

file-loader

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /.(png|jpg)$/,  // 图片或者字体等文件
                use: [
                    {
                          loader: "file-loader",
                          options: {
                            name: "[name]_[hash].[ext]",
                            outputPath: "images/"
                          }
                        }
                    }
                ]
            }
        ]
    }
};

url-loader

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /.(png|jpg)$/,  // 图片或者字体等文件
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240,    // 处理成 base64 的边界值，单位是字节
                            outputPath: 'images' //如果希望图片存放在单独的目录下，那么需要指定outputPath
                        }
                    }
                ]
            }
        ]
    }
};

参考文档

swiftwind0405 commented 4 years ago