webpack-扫盲

webpack是什么

webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle);如图所示：

webpack五个核心概念

Entry

用来指定webpack的打包入口

Output

Output 用来告诉webpack如何将编译后文件输出到磁盘，输出到哪

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Loaders

webpack开箱即用只支持js和json两种文件类型，通过Loaders去支持其他文件类型并且把它们转化为有效的模块，并添加到依赖图中; Loaders本身是一个函数，接口源文件作为参数，返回转换后的结果；

在webpack配置中，loader有两个属性:

1. test 属性， 识别哪些文件会被转换
2. use 属性， 定义在转换时应该使用哪个loader

// webpack.config.js
module.exports = {
 output: {
   filename: 'my-first-webpack.bundle.js',
 },
 module: {
   rules: [{ test: /.txt$/, use: 'raw-loader' }],
 },
};

Plugin

loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务，例如：打包优化、资源管理压缩、环境变量注入等

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
 module: {
   rules: [{ test: /.txt$/, use: 'raw-loader' }],
 },
 plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

Mode

Mode用来指定当前的构建环境是：production、development还是none；设置mode可以使用webpack内置的函数，默认值为production

资源解析

解析ES6

解析es6需要借助于babel-loader，同时也需要配置.babelrc文件

首先，在项目根目录下创建.babelrc文件

// .babelrc
{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

@bebel/preset-env的作用是通过其包含的插件将一些高级特性如ES6语法解析成ES5代码 其次，在webpack.config.js文件中配置：

// webpack.config.js
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            }
        ]
    }
}

解析css、less、sass

解析css

// webpack.config.js
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            }, {
                test: /.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

需要注意的是： 因为loader加载是从右往左的，所以在配置规则的时候，先加载css-loader，然后加载style-loader

解析less

// webpack.config.js
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            }, 
            {
                test: /.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            }
        ]
    }
}

解析sass

同less，只需要将less-loader修改成sass-loader即可，同时将test修改成/.sass$/

解析图片和字体资源

解析图片需要使用到file-loader，配置如下：

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.less$/,
                use: ["style-loader", "css-loader", 'less-loader']
            },
            {
                test: /.(png|gif|jpg|jpeg)$/,
                use: "file-loader"
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: "file-loader"
            }
        ]
    }
}

以上关于webpack扫盲部分就告一段落了，最后附上源代码