通过loader打包非js模块

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀结尾的模块，其他非 .js结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正在打包。

loader 加载器可以协助 webpack打包处理特定的文件路径

• less-loader 可以打包处理 .less 相关的文件
• sass-loader 可以打包处理 .scss 相关的文件
• url-loader 可以打包处理 css 中与 url 路径相关的文件

打包处理css文件

1. 安装style-loader&css-loader

npm i style-loader css-loader -D

2. 在webpack.config.js的module -> rules 数组中，添加 loader 规则如下

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/, // test属性，规定哪些文件会被转换
                use: [      // use属性，在进行转换时，应用哪些 loader
                    { loader: 'style-loader'},
                    { loader: 'css-loader'}
                ],
            }
        ]
    }
}

use 数组中指定的loader顺序是固定的

多个loader的顺序是 从后往前调用

打包处理less文件

1. 安装

npm i less-loader less -D

2. 在webpack.config.js的module -> rules 数组中，添加 loader 规则如下

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/, // test属性，规定哪些文件会被转换
                use: [      // use属性，在进行转换时，应用哪些 loader
                    { loader: 'style-loader'},
                    { loader: 'css-loader'},
                    { loader: 'less-loader'}
                ],
            }
        ]
    }
}

打包处理scss文件

1. 安装 sass-loader node-sass

npm i sass-loader node-sass -D

2. 在webpack.config.js的module -> rules 数组中，添加 loader 规则如下

module.exports = {
    module: {
        rules: [
           {
                test: '/\.scss$/',
                use: [
                    {
                        {loader: 'style-loader'},
                        {loader: 'css-loader'},
                        {loader: 'scss-loader'}
                    }
                ]
            }
        ]
    }
}

配置postCSS自动添加css的兼容前缀

1. 安装 postcss-loader & autoprefixer

npm i postcss-loader autoprefixer -D

2. 在项目根目录中创建postcss配置文件postcss.config.js

const autoprefixer = require('autoprefixer')
module.exports = {
    plugins: [autoprefixer] // 挂载插件
}

3. 在webpack.config.js的module -> rules 数组中，添加 loader 规则如下

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/, // test属性，规定哪些文件会被转换
                use: [      // use属性，在进行转换时，应用哪些 loader
                    { loader: 'style-loader'},
                    { loader: 'css-loader'},
                    { loader: 'postcss-loader'} 
                ],
            }
        ]
    }
}

打包样式表中的图片和字体文件

1. 安装

npm i url-loader file-loader -D

2. webpack.config.j的module -> rules添加 loader 规则如下

module.exports = {
    module: {
        rules: [
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader?limit=16940'
            }
        ]
    }
}

打包处理js文件中的高级语法

1. 安装babel转换器相关的包 babel-loader & @babel/core @babel/runtime

npm i babel-loader @babel/core @babel/runtime -D

2. 安装babe;语法插件相关的包：@babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

3. 在项目根目录，创建babel配置文件babel.config.js并初始化基本配置如下

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'],
    rules: [
        {
            test: /\.js$/,
            use: 'babel-loader', exclude: /node_modules/
        }
    ]
}

vue组件加载器

1. 安装 vue-loader & vue-template-compiler

npm i vue-loader vue-template-compiler -D

2. 在webpack.config.js配置文件中，添加vue-loader的配置项

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    module: {
        rules: [
            {test: /\.vue$/, loader: 'vue-loader'}
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

打包与发布

1. 修改package.json文件中配置webpack打包命令

scripts: {
    "build": "webpack -p",
}

html-webpack-plugin

html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中

安装

Webpack 5

npm i --save-dev html-webpack-plugin yarn add --dev html-webpack-plugin

Webpack 4

npm i --save-dev html-webpack-plugin@4 yarn add --dev html-webpack-plugin@4

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development",
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html'
        })
    ]
}