【Webpack】2.四个核心概念及使用

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

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

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

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

  在开始下面的代码之前，我们需要安装 style-loader 和 css-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