【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