学习webpack中的核心概念

时间 2020-05-30

标签学习 webpack 核心概念繁體版

原文原文链接

一、webpack的做用

是一个现代 JavaScript 应用程序的 静态模块打包工具。
可以构建项目的依赖图，反应出项目中所需的各个模块，生成一个或多个bundle。

二、entry

entry指明用哪一个文件来做为依赖图的起点，而后webpack找到enrty依赖了哪些模块和库。webpack从这里开始转发。css

module.exports = {
    // 单入口
    entry:'src/index.js' 
    
    //多入口,数组形式
    [
     isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), //isEnvDevelopment = webpackEnv === 'development';
     paths.appIndexJs //appIndexJs: resolveModule(resolveApp, 'src/index'),
    ].filter(Boolean)
}
复制代码

三、output

指明将webpack打包生成的bundle输出到哪里，以及这些bundle的命名规则。html

module.exports = {
    output:{
        path:'build' //bundle输出到何处
        filename:'[name].bundle.js' //entry中的文件生成的bundle的名称
        chunkFilename:'[name].[contenthash:8].chunk.js' //非入口(non-entry) chunk 文件的名称。
        }
}
复制代码

四、loader

webpack 只能理解 JavaScript 和 JSON 文件。
loader的做用是将其余类型的文件转化为有效的模块。
module.rules 容许用户在 webpack 配置中指定多个 loader。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' } //执行顺序sass-loader ->css-loader ->style-loader
        ]
      }
    ]
  }
};
复制代码

五、plugin

插件能够用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。能够用来处理各类各样的任务。node

//使用一个plugin
//一、须要 require()改插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 经过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  plugins: [
  //二、屡次使用的插件，经过使用 new 来建立它的一个实例。
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

复制代码

六、mode

设置相应环境以执行相应的优化(optimization)，默认为productionreact

module.exports = {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
 }
复制代码

七、bail

在遇到第一个错误时，webpack是否中止打包。webpack

module.exports = {
  bail: true //退出其打包过程
};
复制代码

八、devtool

指明webpack是否，及如何生成source map。git

module.exports = {
//source-map 原始源代码
//cheap-module-source-map 原始源代码（仅限行）
    devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map'
      }
复制代码

九、optimization

module.exports = {
  //...
  optimization: {
    //是否使用 TerserPlugin 压缩true bundle。mode为production时默认为true
    minimize: false,
    //使用定制 TerserPlugin 实例，覆盖默认压缩工具(minimizer)。
    minimizer: [
        new TerserPlugin({
            cache: true,
            parallel: true,
            sourceMap: true, // Must be set to true if using source-maps in production
            terserOptions: {
              // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
            }
      }),
    ],
    // 打包优化策略（待深刻学习）
     splitChunks: {
      // include all types of chunks
      chunks: 'all' 
    },
    // 用于优化缓存（待深刻学习）
     runtimeChunk: true
  }
};
复制代码

十、resolve

设置模块如何被解析github

module.exports = {
  resolve: {
    //设置别名
    alias: {
        'react-native': 'react-native-web',
        '~': path.resolve(__dirname, '../src/'),
        '@locale': '@enos/dpl/lib/locale/localeUtils'
      },
    //自动解析扩展名，引入文件时就不须要加上扩展名了
    extensions: ['.wasm', '.mjs', '.js', '.json'], //如引入file.js，只须要import File from '../path/to/file';
    //在哪些目录下解析模块
    modules: ['node_modules'],
    //额外使用的插件
    plugins: [
        new DirectoryNamedWebpackPlugin()
    ]
  }
};
复制代码

十一、resolveLoader

仅用于解析 webpack 的 loader 包web

十二、module

配置项目中不一样类型和功能的模块npm

module.exports = {
  module: {
    rules: [
      {parser: {requireEnsure: false}}, //解析器
      {
        enforce: 'pre', //前置loader
        exclude: /node_modules\/(?!(ansi-styles)\/).*/, //排除哪些文件
        include: paths.appSrc, //包括哪些文件
        loader: require.resolve('url-loader'), //废弃，支持use替代
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        oneOf: [
          //当规则匹配时，只使用第一个匹配规则。
          {
            resourceQuery: /inline/, // foo.css?inline
            use: 'url-loader',
          },
          {
            resourceQuery: /external/, // foo.css?external
            use: 'file-loader',
          },
        ],
      },
    ],
  },
};

复制代码

1三、node

这些选项能够配置是否 polyfill 或 mock 某些 Node.js 全局变量和模块。json

module.exports = {
  node: {
    dns: 'mock',
    fs: 'empty',
    path: true,
    url: false
  }
};
复制代码

1四、performance

性能配置

module.exports = {
  performance: {
    hints: false, //false | "error" | "warning" 文件过大时如何报错
  }
};
复制代码