webpack入门之基本概念

一，webpack的介绍

webpack是模块打包机，那什么是模块呢？对于webpack来说，js，css，图片等资源都被看做模块。但是有些模块不能在浏览器中执行或者有兼容问题，所以由webpack对其进行处理，转换成浏览器能够识别并执行的模块。不管什么类型的模块，webpack都有方法对其进行处理，这就需要不同的loader。

webpack的打包流程：从webpack配置文件的入口（entry）开始，查找入口文件依赖的所有模块，对其进行格式转换（转换成浏览器能识别的）和其他操作，并查找此模块依赖的所有模块并进行格式转换，不断递归执行。以每个入口为单位，其所依赖的所有模块为一组，形成一个chunk（代码块）。最后Webpack把所有的chunk输出。整个过程中，Webpack会在特定的时间执行plugin中的逻辑。

webpack最基本的操作就是查找依赖模块，将不同类型的模块通过不同的loader进行格式转换，并且输出。

二，webpack的基础配置

//webpack.config.js
var path=require("path");
module.exports={
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"bundle.js"
    },
    module: {
        rules: [
          { test: /\.css$/, use: 'css-loader' },
          { test: /\.jsx?$/, use:'babel-loader'}
        ]
    },
    plugin:[
        new HtmlWebpackPlugin();
    ]
}
复制代码

上面的代码是一段最简单的webpack配置文件，它里面现在有4个配置项，涉及四个基础概念：入口，出口，加载器，插件。

入口：webpack的入口文件，webpack将从入口文件开始查找其所依赖的模块。

多入口文件

输出：控制webpack向硬盘写入编译文件。

配置项至少包括两项内容：输出目录（必须是绝对路径）和输出文件名。

加载器（loader）：对模块进行格式转换。在module的rules中配置。

1.使用loader的方式有三种：配置（常用推荐），内联，cli。

2.配置方法：

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      },
        {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  }
复制代码

3.常用加载器：

css-loader

style-loader

url-loader

file-loader

插件：在特定的时间执行对应的逻辑。

插件其实是在Webpack的构建过程中的某一个时刻，注册的一个函数，当这一时刻发生时，注册的函数会执行。

//plugins是一个数组，包含我们使用的所有插件，传入一个new实例
 plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

复制代码

常用插件：

html-webpack-plugin : 自动产出html

未完待续...