webpack的安装与基本使用

什么是webpack :

1. webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。

2. 它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发效率提高。

3. 对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

为什么要打包 ：
因为一个项目中的逻辑多了，文件多了，项目的复杂度提高了
（就比如我们嫌css不好用所以就出现了sass/less）这是一样的道理

webpack的安装（4.0版本的安装方法）：

不推荐使用全局安装
全局安装：
打开cmd 输入npm i webpack -g
局部安装：

1. 先创建一个文件夹，
2. 然后cmd进到这个文件夹后输入命令

npm install -D webpack@v4.41.2 webpack-cli

（这个命令把webpack-cli也安装了）
这步完了后会有这三个文件 node_modules、package，package-lock

4. 之后输入npm init 初始化他 一直按回车就可以
   也可以输入npm init -y 直接跳过哪些判断

   npm init -y
   

   

5. 然后再继续输入

    npm install -D webpack@v4.41.2 webpack-cli
   

   如果出现以下这种报错
   

就把文件夹package.json中的 “name”:“webpack” ，把webpack换个名字随便一个
比如:

5. 查看版本号输入命令

     .\node_modules\.bin\webpack -v
   

注意：这里在cmd中使用的是 \ 而不是 /

基本使用:

在你创建的文件里再创建一个src文件
再在src文件中随便创建一个js文件 在创建的js文件中随便输入一些内容做测试

最后再命令行里面输入

.\node_modules\.bin\webpack .\src\a.js

这样就算是打包好了 他打包好的文件会自己在文件夹中创建一个dist的文件夹 把打包的内容放进去
使用的话就直接引入dist文件就好了

扩展：如果你嫌
.\node_modules.bin\webpack .\src\a.js写的太麻烦
你可以在package.json里面配置scripts

 "start": "./node_modules/.bin/webpack ./src/a.js"

配置完之后你可以输入命令 ： npm run start 来进行打包
不用再写那么长

还有另一种写法 ，也是核心配置
（如果写了就会自动把里面的代码给输出上去，这个如果不写的话 就不会去执行，）

• 在文件夹中创建一个webpack.config.js文件 (这个是配置文件 , 里面通过 module.exports={} 去暴漏出去的)
• 在里面配置你打包出来的文件是压缩的还是不压缩的
• 能指定打包的入口文件（入口文件有3中格式：
  String , Array , Object
  ）

webpack.config.js中的代码

//配置文件
module.exports={
    //mode:配置打包出来的文件
    //production:默认 压缩版
    //development 未压缩
    mode:'production',

    // 指定打包⼊口⽂文件 （有三中打包格式String,Array,Object）
    // 一个入口、一个打包文件
    // entry: './src/a.js',

    // 多入口，一个打包文件(就是把几个代码合到一起了)
    // entry: [
    //     './src/a.js',
    //     './src/b.js',
    // ],
    
    //多个入口，多个打包文件(每个里面可以装不同的效果，
    //然后根据页面的需求再去决定要不要这个效果)
    entry:{
        "index":'./src/a.js',
        "list":'./src/b.js',
    }

}

这种格式的指定打包入口文件 他打包的内容在dist文件夹中，然后在index.html中引入 就可以引入指定的文件

    entry:{
        "index":'./src/a.js',
        "list":'./src/b.js',
    }

总结：

webpack就是模块化打包工具，他做的事情就是：
分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），
并将其打包为合适的格式以供浏览器使用。

webpack.config.js文件就是用来打包配置的文件，需要手动配置