Webpack4 入门

栏目: JavaScript · 发布时间: 7年前

内容简介：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

2. 安装

Webpack4 将命令行相关抽离到 webpack-cli 中，所以要使用 webpack 也要安装 webpack-cli。

npm install webpack webpack-cli webpack-dev-server -g

3. 核心概念

webpack 最核心的概念主要有以下四个：

entry （入口）
output（输出）
loader（加载器）
plugins（插件）

3.1 entry（入口）

entry 指定 weipack 应该使用哪个模块来作为构建内部依赖的开始。多页面应用也在这里配置。

webpack.config.js 的 entry 配置示例如下：

var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: './src/js/index.js',
        hello: './src/js/hello.js'
    }
};

3.2 output (输出)

output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

webpack.config.js 的 output 配置示例如下：

var path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: './src/js/index.js',
        hello: './src/js/hello.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[chunkhash].js'
    },
};

3.3 loader（加载器）

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

常用的 loader 有 style、css、url、html等。安装插件命令如下：

npm install --save-dev css-loader style-loader

webpack.config.js 的 loader 配置示例如下：

module.exports = {
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            attrs: ["img:src"]
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[name]-[hash:5].min.[ext]",
                            limit: 10000, // size <= 20KB
                            publicPath: "static/",
                            outputPath: "static/"
                        }
                    }
                ]
            }
        ]
    }
};

3.4 plugins（插件）

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。

webpack.config.js 的 plugins 的配置示例如下：

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {

    plugins: [
        new HtmlWebpackPlugin({
            // filename: "index.html",
            template: "./src/index.html",
            inject: "head",
            // chunks: ["src"], // entry中的app入口才会被打包
            minify: {
                // 压缩选项
                collapseWhitespace: true
            },
            title: 'webpack test title'
        })
    ]
};

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

算法分析-有效的学习方法(影印版)

Jeffrey J.McConnell / 高等教育出版社 / 2003-03-01 / 28.0

本书主要目标是提高读者关于算法对程序效率的影响等问题的认知水平，并培养读者分析程序中的算法所必需的技巧。各章材料以激发读者有效的、协同的学习方法的形式讲述。通过全面的论述和完整的数学推导，本书帮助读者最大限度地理解基本概念。本书内容包括促使学生参与其中的大量程序设计课题。书中所有算法以伪码形式给出，使得具备条件表达式、循环与递归方面知识的读者均易于理解。本书以简洁的写作风格向读者介绍了兼具......一起来看看《算法分析-有效的学习方法(影印版)》这本书的介绍吧!

码农工具