webpack 基础使用

1. 初始化package.json

   npm init
   

2. 下载并安装webpack

   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. 运行指令
   一. 开发环境指令：

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

   《1》-webpack会以.src/index.js为入口文件开始打包，打包后输出到 ./build/build.js 整体打包环境 是开发环境

   《2》功能：webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法。

   《3》打包成功结果图：
   
   
   

   注意:
   遇到报错信息：

   webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本 报错问题

   解决方法：
   《1》在win10 系统中搜索框 输入 Windos PowerShell
   《2》打开了powershell命令行之后,选择以管理员身份运行，输入
   set-ExecutionPolicy RemoteSigned 然后更改权限为A
   《3》最后通过 get-ExecutionPolicy 查看当前的状态
   《4》重新输入 指令 （开发环境或者 生产环境）

   参考链接：
   https://blog.csdn.net/Autism_er/article/details/108444522

   二. 生产环境

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

   《1webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js，整体打包环境，是生产环境。

   《2》功能：在开发配置功能上多一个功能，压缩代码。

   《3》打包成功结果图：

   
   
   

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
   

   打包结果：
   
   打包失败。

结论：

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