webpack--entry、output、loader和plugins

三、webpack的四个核心概念

1.entry和output

在webpack.config.js文件里进行操作：

例如：

a.entry

指定入口文件，也就是webpack要从哪个文件入手开始进行打包

 单入口：

例如

多入口：

例如

b.output出口

在webpack.config.js文件里进行操作：

针对单入口：

entry: './src/index.js',

     //__dirname--目录名；filename--输出名
    // 针对单入口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }

通过 npm run webpack 执行；在项目的根目录下便会生成一个dist文件夹，文件夹里面会生成一个bundle.js文件：

针对多入口：

entry: {
        main: './src/index.js',
        search: './src/search.js'
    }

// 针对多入口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }

通过 npm run webpack 执行；在项目的根目录下便会生成一个dist文件夹，文件夹里面会生成一个search.js和main.js文件：

2.loader

 a.什么是 loader

  loader 让 webpack 能够去处理那些非 JS 文件的模块

b.babel-loader

连通babel和loader，执行如下命令安装相关包：

npm install --save-dev babel-loader@8.1.0

c.安装 Babel

npm install --save-dev @babel/core@7.11.0 @babel/preset-env@7.11.0

d.配置 babel-loader

在项目根目录下创建.babelrc文件，然后进行如下配置：

{

  "presets": ["@babel/preset-env"]

}

   

参考地址：https://www.webpackjs.com/loaders/

接下来在 webpack.config.js 文件里进行相关配置：

在通过 npm run webpack 来执行，执行成功后就会在项目的根目录下生成一个dist文件夹：

e.引入 core-js

编译新增 API

在index.js中添加：import "core-js/stable";

执行：

npm install --save-dev core-js@3.6.5

f.打包并测试

在2.html中引入：

<script src="./dist/index.js"></script>

执行：

npm run webpack

在谷歌浏览器中：

在火狐浏览器中：

在IE浏览器中：

3.plugins

a.什么是 plugins

 插件

loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务

具体可参考：

https://www.webpackjs.com/plugins/

b.html-webpack-plugin

在安装该插件之前，我们需要先进到该项目的目录，然后通过 npm install安装package.json相关的东西

然后再通过如下命令安装该插件：

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

c.配置 html-webpack-plugin 插件

在webpack.config.js文件里做如下配置：

然后再在webpack.config.js文件里的 module.exports = {}导出模块中添加如下内容：

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

module.exports = {
    mode: 'development',
     entry: {
       index: './src/index.js'
     },
   
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

    plugins: [
        // 单入口
        new HtmlWebpackPlugin({
            template: './index.html'
        }) 
    ]
};

再在命令行行输入如下命令进行运行：npm run webpack

运行成功后便会在项目的根目录下自动生成一个dist文件夹，并且自动生成如下文件：

在index.html文件里会自动引入：

<script src="index.js"></script>

d.多页面时 html-webpack-plugin 插件的配置

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

module.exports = {
    mode: 'development',
   
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

    plugins: [
        // 多入口
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            //chunks: 告诉插件，需要引入的文件是哪一个
            chunks: ['index'],
           
        }),

        new HtmlWebpackPlugin({
            template: './search.html',
            filename: 'search.html',
            chunks: ['search']
        })
    ]
};

其余的操作同上面的单页面操作一样

e.html-webpack-plugin 插件的其他功能

plugins: [
        // 多入口
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            //chunks: 告诉插件，需要引入的文件是哪一个
            chunks: ['index'],

            //其他操作
            minify: {
                // 删除 index.html 中的注释
                removeComments: true,
                // 删除 index.html 中的空格
                collapseWhitespace: true,
                // 删除各种 html 标签属性值的双引号
                removeAttributeQuotes: true
            }
        }),

        new HtmlWebpackPlugin({
            template: './search.html',
            filename: 'search.html',
            chunks: ['search']
        })
    ]