webpack笔记（ 二 ） - webpack的安装和使用

webpack简介

webpack是一个基于模块化的打包（构建）工具, 它把一切都视作模块

它通过一个开发时态的入口作为起点, 分析出所有的依赖关系, 然后经过一系列的过程（压缩, 合并）, 最终生成线上环境的文件

webpack的特点:

• 为前端工程化而生: webpack致力于解决前端工程化, 特别是浏览器工程化中遇到的问题, 让开发者集中注意力编写业务代码, 把工程化过程中问题交给webpack
• 简单易用: 支持零配置, 可以不用写任何一行额外的代码就可以使用webpack
• 强大的生态: webpack是非常灵活, 可以扩展的, webpack本身的功能并不多, 但他提供一些可以扩展其功能的机制, 使得一些第三方库可以融入到webpack中
• 基于nodejs: 由于webpack在构建的过程中需要读取文件, 因此它是运行在node环境中的
• 基于模块化: webpack在构建过程中要分析彼此的依赖关系, 方式是通过模块化导入语句分析的, 他支持各种模块化标准, 包括但不限于commonjs, es6 module

webpack的安装

webpack通过npm安装, 它提供了两个包:

• webpack: 核心包, 包含了webpack在构建过程中要用到的所有api
• webpack-cli: 提供一个简单的cli命令, 它调用了webpack核心包的api来完成构建

安装方式:

• 全局安装: 可以全局使用webpack命令, 但是无法为不同项目对应不同的webpack版本
• 本地安装: 推荐, 每个项目都使用自己的webpack版本进行构建

npm install webpack webpack-cli -dev // webpack和webpack-cli的安装

webpack的使用

使用的话你可以只用一条命令

webpack 

默认情况下, webpack会以./src/index.js作为入口文件并分析依赖关系, 打包到./dist/main.js文件中

通过--mode选项可以控制webpack打包结果的运行环境

我们可以在文件夹根目录下新建一个src文件夹, 并创建index.js文件, 结构如下

index.js文件如下

// 你也可以随便写写, 想写啥就写啥, 我们最终要看的也就是webpack的编译结果
console.log('hello, Webpack');

const name = 'loki'; 

const foo = () => {
   
    return 'helloWorld';
}

我们在工程根目录下执行如下命令

npx webpack

我们会发现根目录下生成了一个dist文件夹, 里面生成了一个main.js文件, 我们打开发现如下

// dist/main.js
!function(e){
   var t={
   };function n(r){
   if(t[r])return t[r].exports;