webpack4.x学习之路

webpack4.x学习之路

一、概念

本质上，webpack是一个JavaScript应用程序的静态模块打包工具。其实就是把css、html、js、image可配置性的打包工具，实现项目模块化。

二、核心概念

• 入口（entry）： 以这个作为入口点，来打包其所相关的模块。
• 输出（output）： 输出入口打包后的bundle
• 模块（module）：相关打包所需要的loader集合
• 插件（plugins）：扩展插件，可以引入相关的插件，来优化和资源管理，注入相关的环境变量
• 模式（mode）：可根据不同的环境配置不同的参数，可选参数有development/production

三、webpack配置

1. 初始化项目以及安装webpack依赖

npm init -y
npm i webpack webpack-cli -D

2. 配置 webpack.config.js

const path = require('path');

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

在当前目录下输入webpack --mode=production打包

3. 使用模板html

html-webpack-plugin 可以指定template文件，然后将相关依赖的js，引入到其页面
安装依赖：

npm i -D html-webpack-plugin

在webpack.config.js中增加配置：

const htmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports = {
    // ... other codes
  plugins: [
    new htmlwebpackplugin({
        filename: 'index.html',
        minify: {
            removeAttributeQuotes: true
        },
        hash: true,
        chunks: ['index'],
        template: './src/index.html'
    }),
    ]
}

4. 加载css文件

加载css文件要依靠相关的loader的转化成js类型，所涉及到的loader有style-loader, css-loader。
可通过以下命令来安装依赖

npm i -D style-loader css-loader

在webpack.config.js中的配置如下：

module.exports = {
    //other codes
    module: {
        rules: [
            {
           test: /\.css$/,
            use: [{
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader'
                ],
                //....
            }
        ]
    }
} 

这里面牵扯到几个概念：

• test： 匹配你需要转换的文件扩展名的正则表达式
• use: 所使用相关的loader的名称
• include/exclude: 所必须处理的文件夹或不需要处理的文件夹
• query: 其他相关的配置选项

相关的css在js中引入才会打包到其相关的模块中

5. 图片加载

图片加载相关的依赖有：

npm i -D file-loader url-loader

在webpack.config.js 中增加loader的配置如下：

module.exports = {
    //other codes
    module: {
        rules: [
            {
                test: /\.(gif|jpg|png)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 500,
                            outputPath: 'images'
                        }
                    }
                ]
            }
        ]
    }
} 

其实这只是打包css中的图片，如果是页面中用img标签引入的图片，打包仍会报错，下面通过html-withimg-loader来打包

安装依赖：

npm i html-withimg-loader -D

webpack.config.js的配置

module: {
    // other codes
    rules: [{
            test: /\.(html|htm)$/i,
            use: ['html-withimg-loader']
        }]
}

....未完待续