Webpack4 入门

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

内容简介：本质上，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'
        })
    ]
};

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

查看所有标签

猜你喜欢:

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

码农书籍

How to Build a Billion Dollar App

George Berkowski / Little, Brown Book Group / 2015-4-1 / USD 24.95

Apps have changed the way we communicate, shop, play, interact and travel and their phenomenal popularity has presented possibly the biggest business opportunity in history. In How to Build a Billi......一起来看看《How to Build a Billion Dollar App》这本书的介绍吧!

码农工具