webpack学习路径(01.webpack的配置及使用)

对于webpack，我的理解是一种工具提供了友好的前端模块化开发的支持，可以解决代码压缩混淆，浏览器兼容性问题，以及提升性能等主要功能，

安装配置过程：

• 首先创建一个根目录（随便创建一个文件夹），然后在根目录中运行终端cmd，然后在cmd中输入npm init
  -y，完成后会在根目录生成一个package.json文件,
• 然后为了规范我们要在创建一个src文件用于放置代码，之后我们就可以在src中进行编程,此时当我们需要使用其他的库的时候我们可以使用npm直接安装，安装命令
  npm i ... -S或npm i ... -D（在cmd中使用）； 如npm i jquery -S，

i是install的缩写，-S的作用是在package.json文件中的depencencies节点中写入所安装的插件版本号，这个节点所写入的版本号是代表开发以及发布的所有过程都一直需要使用的工具，如果只是开发时候才需要的工具则会使用-D这个指令并写入到devDepencencies，这两个语句分别是–save ,–save dev的缩写

• 安装好插件后 我们在编程时写入一些比较高级的语法是遇到语法错误时，我们此时就会体现出webpack的作用了，

此时我们要使用npm安装相应版本的webpack； 相应指令：npm i [email protected]5.42.1 webpack-[email protected]4.7.2

-D（webpack只在开发时需要所以写入到depencencies节点中）；

• 安装好之后我们需要在进行webpack的导包配置；
  首先我们需要先创建一个webpack的专属配置文件,创建一个’webpack.config.js’文件,然后在文件中输入:

module.exports={ mode:'development' }

这里是设置webpacke的运行模式模式有两种（开发模式，和生产模式module.exports={ mode:‘production’ }），当使用生产模式时，webpacke会帮我们压缩打包好的文件，然后还需要在package.json文件中的javascript节点中添加"dev":"webpack“代码,我自己的电脑因为某些原因需要多添加一点代码

"dev":"webpack --mode development"（如果已经配置过上一步的话这里就不用加上--mode development语句直接"dev":"webpack"就行了）;

到这里就已经配置好了webpack。

• 最后我们需要运行webpack的相应模块用于打包（打包就可以解决一些兼容，性能，存储问题);
  运行webpack的打包模块需要在终端中输入npm run dev；这时候如果cmd没报错的话那就证明你的配置没问题了。
  接下来你创建的根目录中就会自动生成一个dist文件夹，里面的main.js文件就是处理好之后的你的相印js文件。此时将这个文件导入到你的index.html中代替之前所导入的js文件即可解决兼容性问题.