3.webpack4初体验（webpack可以处理的文件）

3.1 准备相关代码文件

（1）data.json

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

（2）index..js

// import "./index.css";
import data from "./data.json";
console.log(data);
 
function add(x,y) {
    return x + y;
}
console.log(add(1, 2));
const x = 555
console.log(x)

（3）index.css

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

（4）代码文件结构图（build为打包后生成的文件目录，无需理会，只需创建src）

下面在src上一级目录运行指令将让index.js作为webpack入口起点文件，运行指令前需要注释index.js入口文件中的代码段： import   "./index.css"（webpack只能处理js/json文件，webpack不能直接处理css文件，需要借助loader，这里只是验证webpack不能直接处理css文件）

1）运行指令

开发环境：

        执行命令：webpack ./src/index.js -o ./build/built.js --mode=development

        webpack会以./src/index.js为入口文件开始打包，打包后输出./build/built.js

生产环境：

        执行命令：webpack ./src/index.js -o ./build/built.js --mode=production

        与开发环境的区别是，这一步会进行压缩文件。

        执行如上命令都会输出built.js文件，查看built.js文件，我们可以看见webpack对其进行的处理，通过cosnt x = 555 console.log(x)可以验证，webpack不能直接处理ES6语法进行兼容浏览器，在built.js中，const x = 555 console.log(x)以原文件的形式输出了。

再创建一个index.html文件将打包后输出的built.js文件导入，可以在控制台看到输出

注：如果将入口文件index.js中的import "index.css"注释解开，执行webpack打包命令，可以看到报错输出。

总结：

1）webpack只能处理js/json，不能处理css/img等其他资源文件

2）生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化（这里和处理ES6兼容各个浏览器是有差别的，兼容ES6可以通过babel处理）

3）生产环境会比开发环境多一个JS代码压缩