webpack初步学习

今天工作比较轻松，所以打算抽空看看webpack。说起 webpack ，我是熟悉又陌生。因为平时写react的时候会用到npm eject来看webpack配置，但是基本上是有问题了就搜索一下，偶尔会修改一些配置信息，从没有全面了解过这方面信息，现在正好来看看。

本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

webpack主要是通过 webpack.config.js 这个文件来进行构建，通过一些属性对整个打包的过程进行控制，我们常用的属性有，入口（entry），输出（output），文件处理（loader），插件（plugin），模式（mode）几种

1.入口（entry）

正如字面意思一样，我们打包的时候需要选取一个文件作为我们打包的起点，例如

1 //webpack.config.js
2 module.exports = {
3   entry: './path/to/my/entry/file.js',
4 };

如果不设置的话，默认打包路径是 ./src/index 。

入口可以支持多选，多个入口可以通过数组或者对象的方式进行打包，示例如下：

//数组方法
module.exports={
  entry: ['./src/file_1.js', './src/file_2.js']
}


//对象方法
module.exports={
  entry: {
    a2: 'dependingfile.js',
    b2: 'dependingfile1.js'

, }, }

本来想介绍下对象方法配置的的细则，结果试验了一下好像提示报错，所以暂时不把方法列出来了。

2.输出（ output ）

既然我们是打包，肯定有一个完成品所以我们需要设定打包的位置，基础配置为

1 module.exports = {
2   output: {
3     filename: 'bundle.js',
4   },
5 };
6 //此配置将一个单独的 bundle.js 文件输出到 dist 目录中。

当有多个入口的时候，输出文件的名称不能固定为一个值，我们要写成占位符格式

 1 module.exports = {
 2   entry: {
 3     app: './src/app.js',
 4     search: './src/search.js',
 5   },
 6   output: {
 7     filename: '[name].js',
 8     path: __dirname + '/dist',
 9   },
10 };
11 
12 // 写入到硬盘：./dist/app.js, ./dist/search.js

3.loader

我们在打包的过程中，不仅仅是把所有文件整合到一起的简单过程，还涉及到对于不同文件进行转译并格式化的过程。比如我们的react用的是jsx，不能直接在js中使用，我们需要提前准备好loader转移成js后再打包，下面是几个常用的roader种类

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
    {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

4.插件（plugin）

loader是让我们对于不同文件打包时进行转译配置，而插件是在打包的流程中进行更多操作。

其中包括：打包优化，资源管理，注入环境变量。下边是一个简单的使用方式：

 1 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
 2 const webpack = require('webpack'); // 访问内置的插件
 3 const path = require('path');
 4 
 5 module.exports = {
 6   entry: './path/to/my/entry/file.js',
 7   output: {
 8     filename: 'my-first-webpack.bundle.js',
 9     path: path.resolve(__dirname, 'dist'),
10   },
11   module: {
12     rules: [
13       {
14         test: /\.(js|jsx)$/,
15         use: 'babel-loader',
16       },
17     ],
18   },
19   plugins: [
20     new webpack.ProgressPlugin(),
21     new HtmlWebpackPlugin({ template: './src/index.html' }),
22   ],
23 };
24 //ProgressPlugin 用于自定义编译过程中的进度报告，
   //HtmlWebpackPlugin 将生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件。

5.模式（mode）

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: 'production',
};

今日份总结就到这里了，明天可以再补充一点，加油，我自己！

最后附上链接资料来源

相关推荐