1.Webpack基本使用

一、安装webpack webpack-cli

webpack-cli用于在命令行执行webpack

 之所以可以安装，是因为npm这个仓库里面有webpack webpack-cli。

现在显示全局的webpack就已经安装了

 二、不使用webpack时js模块化的代码想运行在浏览器上会遇到的问题

在不使用webpack的时候：

 会报错：

 提示我们import表达式不是一个模块，可以这样：

 但现在还会有其他错误：

 这里需要我们开启一个本地服务，open with live serve，我居然开启不了。（直接在搜索栏输入127.0.0.1:端口即可）

 总之这里的代码想跑在浏览器上问题很多。

三、利用webpack对js代码进行打包

现在直接在命令行输入webpack，就会帮我打包生成一个dist文件，因为有默认的入口、出口配置

 

 

 这里面的代码是压缩过的。

而且打包生成的代码可以被浏览器识别？。

 

四、全局的Webpack--涉及到package.json

 不过现在有一点小问题，现在我们用的webpack是全局的webpack，但是对于不同的项目，我们依赖的webpack版本可能不一样，

所以我们在做项目是应该用局部的webpack。这里的webpack是一个package包，而且一个项目还会用到很多其它包，所以我们一般

用package.json来管理这些包。

可以通过npm init手动生成package.json,也可以通过npm init -y自动生成：

现在就生成啦！

 

 现在就可以安装局部的webpack了，不过局部安装又分为开发环境还是生产环境，像webpack就是开发时依赖，所以要加

--save-dev或-D

 webpack会依赖其它包，此时会一起安装。

 此时如果我们直接在命令行敲webpack，用的还是全局的webpack。

想使用全局的webpack：

 

 但这样是当然麻烦的，不过我们的npm给我们提供了一个npx工具。npx首先会去当前文件夹下的node_modules下的bin下帮我们

去找对应的指令，所以：

 不过在开发中我们一般不会使用这个命令，而是在package.json中：

 

 以后这样就可以啦：

 

 五、webpack配置文件--webpack.config.js

难道不感到奇怪吗？在脚本里面我们只写了一个webpack，它就知道入口在哪（默认当前文件夹下的src文件夹下的index.js），出口在哪

（默认当前文件夹下dist文件夹下的main.js）。

如何自己指定入口和出口文件：

 

 

 

 如果我们把这些配置写在脚本里，肯定不行，太复杂了。

可以新建一个webpack.config.js来写webpack的配置。