webpack学习笔记（1）：webpack概览和安装

为什么需要构建工具

1. 转换ES6/ES7语法
2. 转换JSX
3. CSS前缀补全/预处理器
4. 压缩混淆代码
5. 图片压缩

上面的操作都需要使用构建工具来完成

为什么选择webpack

1. 社区生态丰富
2. 配置灵活
3. 支持插件化扩展
4. 官方更新迭代速度快（接近于一年一个大版本）

webpack 的配置文件

1. 默认的配置文件： webpack.config.js
2. 指定配置文件：webpack --config 指定配置文件文件名称

对不同的环境指定不通的配置文件

简单的webpack组成

module.exports = {
	entry: './src/index.js',    // 打包入口文件
	output: './dist/main.js',   // 打包的输出的目录和文件名称
	mode: 'production',         // 环境
	module: {
		rules: [                // Loader配置
		{ test: /\.txt$/, use: 'raw-loader' }
		]
	},
	plugins: [                  // 插件配置
	    new HtmlwebpackPlugin({
		    template: './src/index.html'
	    })
	]
};

环境搭建

1. 安装Node.js 和 npm

参考前端学习笔记：管理多个版本的node和angular/cli

2. 在对应项目中安装 webpack和 webpack-cli(webpack4中，将webpack 和 webpack-cli 分离)

创建前端项目

• 创建目录并进入目录

mkdir webpack-project && cd webpack-project 

• 初始化

npm init -y

执行结果：

webpack-project npm init -y
Wrote to /Users/wjy/gitProject/webpack-project/package.json:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装 webpack和 webpack-cli

执行安装命令：

npm install webpack webpack-cli --save-dev

安装结果：

➜  webpack-project npm install webpack webpack-cli --save-dev

added 121 packages in 8s

17 packages are looking for funding
  run `npm fund` for details

验证安装结果

➜  webpack-project ./node_modules/webpack/bin/webpack.js -v
webpack 5.48.0
webpack-cli 4.7.2