IT狗

Webpack 学习记录之概念

1 什么是webpack

webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD,ESM,CommonJs)、全局分析。

bundle:bundle即由webpack打包出来的文件。

依赖关系:一个文件依赖于另一个文件,webpack就把这种关系视为依赖关系。所以webpack可以接受非代码资源,并把它们当做依赖提供给应用程序。

 

2 主要概念

入口:entry指示webpack使用哪个文件作为构建依赖图的开始。

出口: output指示webpack将打包好的bundles,如何命名以及输出到哪里。

loader:loader可以让webpack如处理那些非JS文件,将起转化为模块(webpack只理解JS)

插件:plugins可以打包优化和压缩等处理各种各样的任务。

模式:mode设置为开发还是生产环境

  const path = require('path');  const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装  const webpack = require('webpack'); // 用于访问内置插件    module.exports = {    entry: './path/to/my/entry/file.js',    output: {      path: path.resolve(__dirname, 'dist'),      filename: 'my-first-webpack.bundle.js'   },   module: {     rules: [       { test: //.txt$/, use: 'raw-loader' }     ]   },   plugins: [     new HtmlWebpackPlugin({template: './src/index.html'})   ],   mode:'production' || 'development' };

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论