【Webpack】2.四个核心概念及使用
发布于 9 个月前 作者 SilenceHVK 1690 次浏览 来自 分享

【Webpack】1.入门及简单使用 【Webpack】2.四个核心概念及使用 【Webpack】3.多入口设置与 html-webpack-pugin 插件详解

webpack 中的四个核心概念 (Demo2 Source

  • Entry 入口
  • Output 输出
  • Loaders
  • Plugins 插件

  webpack 中默认的配置文件名称是 webpack.config.js,因此我们需要在项目中创建如下文件结构:

.        
├── index.html            // 显示的页面
├── main.js              // webpack 入口 
├── webpack.config.js   //  webpack 中默认的配置文件
└── bundle.js          //  通过 webpack 命令生成的文件,无需创建

entry 入口

  入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后。 webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

  可以在 webpack.config.js 中 配置 entry 属性,来指定一个入口或多个起点入口,代码如下:

    moudle.exports = {
        entry: './path/file.js'
    };

output 输出

   output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件。你可以通过在配置指定一个 output 字段,来配置这些过程:

    const path = require('path');
    
    moudle.exports = {
        entry: './path/file.js',
        output:{
            path: path.resolve(__dirname,'dist'),
            filename: 'my-webpack.bundle.js'
        }
    }

  其中 output.path 属性用于指定生成文件的路径,output.filename 用于指定生成文件的名称。

Loaders

   Loaderswebpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后可以利用 webpack 的打包能力,对它们进行处理。

  本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图可以直接引用模块。在更高层面上,在 webpack 的配置中 loader 有两个目标:

  1. 识别应该被对应的 loader 进行转换的那些文件(使用 test 属性)
  2. 转换这些文件,从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(use 属性)

  在开始下面的代码之前,我们需要安装 style-loadercss-loader

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

并在项目中创建 style.css 样式文件:

    h1{ color: red; }

  然后在 webpack.config.js 中输入以下代码:

    const path = require('path');
    
    module.export = {
        entry: './main.js',
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules:[
                { 
                    test: /\.css$/, 
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' }
                    ]
                }
            ]
        }
    };

Plugins 插件

   Loaders 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。

  想要使用一个插件,需要 require() 它,然后把它添加到 Plugins 数组中,多数插件可以通过选项自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建它的实例。

  在开始下面的代码之前,我们需要安装 html-webpack-plugin 插件:

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

它可以简化HTML文件的创建,为您的webpack包提供服务。

  然后在 webpack.config.js 中输入以下代码:

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path');
    
    const config = {
        entry: './main.js',
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules:[
                { 
                    test: /\.css$/, 
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' }
                    ]
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' })
        ]
    };
    
    module.exports = config;

运行与配置

   最后我们可以直接通过 webpack 命令编译打包,如果想要在其命令后加入参数,可以通过配置 package.json 文件中的 scripts 属性:

    {
        scripts: {
            "build": "webpack --config webpack.config.js --progress --display-modules"
        }
    }

当然如果你想要更改默认的配置文件名称,可以将 --config 后面的 webpack.config.js 配置文件名改为你自定义的名称。

  通过以下命令执行:

    $ npm run build
4 回复

期待第三篇。

path.resolve就能把路径解析为绝对路径,为什么还要加__dirname?

来自酷炫的 CNodeMD

@wangxuedongOvO 不好意思现在才看到这个问题,path.resolve() 返回的当前工作目录的绝对路径,而 __dirname 返回的是运行文件当前目录的绝对路径,举个例子我们创建如下目录结构

.
├── target.js				    // 目标文件
├── build 
│   ├── run.js 				  // 输出目标文件路径的执行文件

下面我们在 run.js 中输入以下代码

	const path = require('path');
	console.log(path.resolve(__dirname,'../main.js'));
	console.log(path.resolve('../main.js'));

在 命令行输入命令

	$ node ./build/run.js

输出结果为

	项目文件目录\项目名称\main.js
	项目文件目录\main.js

通过结果你就能知道它们的区别。

回到顶部