探索webpack模块及webpack3新特性

Webpack 是什么？

Webpack 是一个前端工具，用于打包（package） JavaScript 模块文件。

Webpack 有以下优点：

• 可以处理模块化代码和包含其他文件类型的文件
• 可以将代码按照优化级别分离打包，使应用加载更快
• 可以添加各种插件，增强功能
• 可以使用 webpack-dev-server 来提高开发效率

webpack 配置

Webpack 使用一个配置文件（webpack.config.js）来配置打包行为。

以下是一个简单的 webpack 配置示例：

const path = require('path');

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

在示例中，entry 表示 Webpack 需要打包的入口文件，output 表示打包生成的文件名和路径。

模块处理

Webpack 可以处理 JavaScript、CSS、LESS、Sass、图片、字体等各种类型的文件。

处理 CSS

Webpack 可以将 CSS 文件打包成 JavaScript 模块中的字符串，然后使用 JavaScript 动态将样式添加到页面中。

首先需要安装 style-loader 和 css-loader：

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

然后在 webpack 配置文件中添加对应模块的规则：

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

处理图片

Webpack 支持将图片和字体文件打包成 JavaScript 模块中的 URL 字符串，也可以将图片和字体文件生成到磁盘上。

需要安装 file-loader：

npm install file-loader --save-dev

然后在 webpack 配置文件中添加对应模块的规则：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [ 'file-loader' ]
            }
        ]
    }
};

插件

Webpack 还支持各种插件来增强打包行为和功能。

以下是一些常用的插件：

HtmlWebpackPlugin

HtmlWebpackPlugin 可以根据模板生成 HTML 文件，并自动将打包生成的 JavaScript 和 CSS 文件引入到 HTML 中。

需要安装 HtmlWebpackPlugin：

npm install html-webpack-plugin --save-dev

然后在 webpack 配置文件中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            template: 'src/index.html'
        })
    ]
};

UglifyJsPlugin

UglifyJsPlugin 可以将 JavaScript 代码压缩，减小文件体积。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new UglifyJsPlugin()
    ]
};

Webpack3 新特性

Webpack3 带来了一些新特性，提高了打包效率和开发体验。

Scope Hoisting

Scope Hoisting 可以将所有模块的代码打包到一个函数中，减少模块数量和函数调用开销，提高性能。

需要设置 optimization.scopeHoisting 为 true 来启用。

module.exports = {
    optimization: {
        scopeHoisting: true
    }
};

Code Splitting

Webpack 3 提供了更好的代码拆分，可以将代码按照切割点进行拆分，按需加载，提高性能。

module.exports = {
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }
};

示例说明

示例一

假设有一个 JavaScript 文件需要引入 jQuery 和 Underscore，可以在 Webpack 配置文件的 entry 属性中写入数组来实现：

module.exports = {
    entry: [ 'jquery', 'underscore', './src/app.js' ],
    // ...
};

这样 Webpack 就会首先打包 jQuery 和 Underscore，然后将它们和 app.js 打包到一个文件中，以便浏览器加载时只需要请求一个文件即可。

示例二

假设有一个 Sass 文件需要编译成 CSS，可以使用 sass-loader 来处理。

首先需要安装 sass-loader 和 node-sass：

npm install sass-loader node-sass --save-dev

然后在 webpack 配置文件中添加对应模块的规则：

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

这样 Webpack 就会将 sass 文件编译成 CSS，并打包到 JavaScript 中，以便浏览器加载时可以将样式动态添加到页面中。