webpack 基础使用

  距离上次学习webpack已经几个月了，上次只是简单看了个视频，很短，也不细，所以打算把尚硅谷2020最新版Webpack视频看一遍，巩固完善一下知识点。感兴趣的可以去看我的博客webpack 基本概念

1. 初始化package.json

npm init

2. 下载并安装webpack

  上次学webpack安装的是 3.5.3 版本的，这次下载个最新版本试试。（再次下载会自动覆盖之前版本）

npm install webpack webpack-cli -g

npm install webpack webpack-cli -D

3. 创建文件

创建 src 文件夹，创建index.js 入口文件，代码如下：

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

4. 运行指令

1. 开发环境指令：

webpack ./src/index.js -o ./build/built.js --mode=development

• webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js，整体打包环境，是开发环境。
• 功能：webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法。
• 打包成功结果图：
  
  
  

2. 生产环境指令：

webpack ./src/index.js -o ./build/built.js --mode=production

• webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js，整体打包环境，是生产环境。
• 功能：在开发配置功能上多一个功能，压缩代码。
• 打包成功结果图：
  
  
  

5. 在 build 文件夹中创建 index.html 文件，并引入打包后的资源

<script type="text/javascript" src="main.js"></script>

运行结果：

6. 创建json文件，并在 index.js 中引入，重新打包

{
  "name": "jack",
  "age": 18
}

import data from './data.json';
console.log(data);

webpack ./src/index.js -o ./build/built.js --mode=development

打包结果：



可见，可以打包json文件。

7. 创建 index.css 文件，并在 index.js 中引入，重新打包

html,
body {
  height: 100%;
  background-color: pink;
}

import './index.css';

webpack ./src/index.js -o ./build/built.js --mode=development

打包结果：

打包失败。

8. 结论

• webpack能处理js/json资源，不能处理css/img等其他资源
• 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
• 生产环境比开发环境多一个压缩js代码。