webpack打包工具使用

webpack打包工具的使用

什么是webpack？
官方给出的解释是： webpack 是一个现代化javascript应用程序的静态模块儿打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块儿，然后将所有这些模块儿打包成一个或者多个bundle,bundle英文意思时一捆,一包,一扎的意思,接触过juery的小伙伴应该对于bundles不陌生
在下载jquery文件时有jquery.js和query.bundles.js
带有bundles的字样的query文件时经过压缩的.

根据官方文档结合自己的理解来介绍：
从webpack v4.0.0开始，可以不引入一个配置文件。然而，webpack仍然还是高度配置的，在开始前你需要先理解四个核心概念：

入口（entry）
输出（output）
loader
插件（plugins）

入口（entry）

入口文件指示webpack应该使用哪一个模块儿，作为构建其内部依赖图的开始。进入入口七点后，webpack会找到哪些模块儿和库是有入口起点的（直接和间接）依赖的。

每一个依赖项随即被处理，最后输出称之为bundles的文件中（也就是将这些依赖模块儿打包称一个压缩的文件）可以在定义的webpack配置中配置entry属性，来指定一个入口文件起点（或者多个入口文件）。

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口（output）

output属性告诉webpack在哪儿输出它所创建的bundles,（就是需要将这些经过打包处理的文件放大那个文件夹下面）

const path = require('path');//载入path第三方包

module.exports = {
  entry: './path/to/my/entry/file.js', //入口文件
  output: {
    path: path.join(__dirname, 'dist'),  //打包后的文件所要放置的位置
    filename: 'my-first-webpack.bundle.js'
    //打包文件命名
  }
};

在了解到这两个概念入口和输出后我们来试着打包一个文件,首先你必须有安装node.js,因为webpack是在node环境下进行压缩的。

第一步：先新建一个文件夹，这里命名为mywebpack 然后将该文件加在终端打开
第二步：使用npm init -y 或者使用 npm init 初始化一个package.json文件，可以看到此时你的项目文件加夹下多了一个package.json文件

第三步:在mywebpack文件的根目录下新建一个webpack.config.js文件，这个可以随意命名，为了见名直译我就这样命名了

第四步： 我们再再mywebpack文件夹下面新建一个src空文件夹再src文件下面新建文件main.js(作为webpack打包时的入口文件),first.js，person.json文件

第五步由于我们需要一个绝对路径 需要借助path这第三包所以，使用npm i path 下载path包

第六步：在webpack.config.js文件写入：

const path = require("path");   //导入第三方包
module.exports = {

    entry:path.join(__dirname,"./src/main.js"),  
    //入口文件地址
    output: {
        path: path.resolve(__dirname, './dest'), //打包后的目录
        filename: 'dabao.js'  //打包后的文件名称
    }
    
}

第七步：使用webpack打包需要先使用npm安装webpack和webpack-cli,在cmd命令框中输入：

npm install webpack@4 webpack-cli -g

这是全局安装只需要安装一次，下次就不需要再安装
第八步：全局安装好后在终端执行webpack进行打包

出现这样的如上图所示的情况表示已经在指定文件路径下打包成功，我们一起来看一下
文件目录下确实有增加了一个dest目录和一个js文件，我们再来看一下这个dabao.js文件

这就是经过webpack打包后的文件
下面我们在一个html文件中引入这个dabao.js文件并执行一下,我们在刚刚建好的dest文件中新建一个index.html文件,并引入dabao.js文件

运行一下index.html，并看控制台信息

上面介绍了entry和output使用，下面介绍一下plugin

plugin 插件

官方文档的解释是：插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件你只需要require()它，然后把它添加到plugins数组中，多数插件可以通过选项（options）自定义，你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new 操作符来创建它的一个实例

了解到上面的介绍后再来学习一下使用插件来压缩html模板
（一）配置HTML模板
1. 可以安装一个html-webpack-plugin插件来打包html模板（如:在src目录下新建demo.html文件，），并将该模板指向对应的入口文件。
安装html-webpack-plugin插件，如下：
npm i html-webpack-plugin@4 -D

2.接下来修改webpack.config.js配置文件，增加下面的内容：

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

module.exports = {
    entry: path.resolve(__dirname, './src/main.js'), //入口文件
    output: {
        path: path.resolve(__dirname, './dest'), //打包后的目录
        filename: 'dabao.js' //打包后的文件名称
    },
    //设置插件配置项
    plugins: [
        new HtmlWebpackPlugin({
            //在src目录下创建一个index.html页面当作模板来使用
            template: './src/index.html'
        })
    ]
}

在载入html-webpack-plugin模板后执行webpack,会有一个报错信息,报错信息如下

然后再使用npm i webpack@4 -D 执行完这个命令再次使用webpack命令执行一下就不报错了

再来看一下dest文件夹下index.html 发现index文件被压缩了并且增加了一条引入dabao.js文件

(二)打包css样式

在进行css打包之前，先介绍一下loader，loader是一个加载器，下面是官方给出的解释

loader

loader 让webpack去处理哪些非javascript文件（webpack自身只能理解javascript）。loader可以将所有类型的文件转化为webpack能够处理的有效模块儿，然后你就可以利用webpack的打包能力对他们进行处理

本质上，webpack loader 将所有类型的文件转化为应用程序的依赖图(和最终的bundle) 可以直接引入的模块儿

如果想要将css文件经过webpack打包输出到打包好的文件夹下面（dest），我们需要安装两个加载器分别是 style-loader 和 css-loader
命令： npm i style-loader@2.0.0 css-loader@3.6.0 -D
其中css-loader是负责解析css的，而style-loader则负责将css以内部样式表的形式嵌套html中，当使用插件拆分css时就不需要style-laoder了，因为会以外部样式表使用link到html中的

1.使用命令先来下载css-loader和style-loader加载器

2.下载完毕后，我们需要在webpack.config.js中配置一下loader加载器，loader是需要写在module中的，其中在使用css-loader和style-loader的时候我们注意一点 它是从右向左执行的，就是 先解析css文件在将css的样式嵌套到打包好的html文件中

const path = require('path');

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

module.exports = {
    entry: path.resolve(__dirname, './src/app.js'), //入口文件
    output: {
        path: path.resolve(__dirname, './dest'), //打包后的目录
        filename: 'dabao.js' //打包后的文件名称
    },

    //module 当中配置loader
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] //  loader就是要处理对应test规则的文件  loader的use规则，是从右向左处理
        }]
    },

    //设置插件配置项
    plugins: [
        new HtmlWebpackPlugin({
            //在src目录下创建一个index.html页面当作模板来使用
            template: './src/index.html'
        })
    ]
}

下面在src目录下创建一个css文件并写一些样式测试一下

并在src文件下使用require()将reset.css引入main.js中
为了方便能在打包文件中运行查看到效果,所以我给body加了一背景颜色
上面的做法是将css样式嵌套到行内当中，如果我们想要将css样式拆分开来，应该怎样实现.

(三)拆分css(将入口文件中的依赖的内部样式，拆分到一个单独的css文件中)

通过使用 extract-text-webpack-plugin 插件 将src中的css文件拆分成一个单独的样式表。

1.需要先安装extract-text-webpack-plugins插件

npm i extract-text-webpack-plugin@next -D

== 注意目前extract-text-webpack-plugin不支持webpack4 ==

2.修改webpack.config.js文件将插件导入

const path = require("path");   //导入第三方包
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
module.exports = {

    entry:path.join(__dirname,"./src/main.js"),
    //入口文件地址
    output: {
        path: path.resolve(__dirname, './dest'), //打包后的目录
        filename: 'dabao.js'  //打包后的文件名称
    },
     module:{
                rules: [{
                    test: /\.css$/,
                    //use: ['style-loader', 'css-loader'] //  loader就是要处理对应test规则的文件  loader的use规则，是从右向左处理
            use: ExtractTextWebpackPlugin.extract({ use: 'css-loader' }) //将css用link方式引入就不需要style-loader了
                }]
            },
    plugins:[
        new HtmlWebpackPlugin({
                        //在src目录下创建一个index.html页面当作模板来使用
                        template: './src/demo.html'
                    }),
            //css拆分后会把css文件放到dest目录下的styles.css中
        new ExtractTextWebpackPlugin('style.css')
    ]
    
}

然后再终端执行一下webpack命令
我们来看一下dist目录下是否多了一个style.css文件，确实有