初学 webpack

webpack初学

       使用webpack，webpack的特性：

                 1.treeshaking
                 2.代码懒加载
                 3.代码分割

       webpack4的特点：
                 1.速度快，大型项目节约90%构建时间
                 2.内置更多的默认配置，变更了许多API

       

        webpack基础知识：
                 1.定义：
                       webpack是一个模块打包工具 webpack is a module bundle
        
                  2.ES Module 模块引入方式 
                      先导出 ：export default 模块名
                      后引入 ：import  模块名 from “相对定位地址”

                  3.node模块引入规范
                  4.commonJS 模块引入规范
                        先导出 ：module.exports = 模块名 
                        var 变量名 = require("相对地址")

          其他引入规范
                        SMD
                        AMD

         安装webpack命令  npm init 初始化包名  
                                                  npm i webpack-cli --save-dev
                                                  npm i webpack --save
         npx webpack   要打包的文件名  进行打包
                 
               webpack环境搭建
                   提升webpack打包速度，
                        1.尽量保持node.js 版本尽量的最新版  node -v查看版本号
                        2.尽量保持webpack 版本尽量的最新版  
                   安装node.js 安装 10.13.0LTS 版本；

 创建webpack项目 创建文件夹

          1.在文件夹中 进入命令行 npm init 初始webpack项目
                  然后一路回车
           2.生成一个package.json文件
                  在package.json中添加一个 “private":"true"  意思是这是一个私有项目，它不会被发布到npm 的线上仓库。
                  去掉“main”:"index.js" 配置项
                  去掉"script":{//可以先去掉里边的内容}
                  "author":"可以写成自己的名字"
                  "license":"INIT"如果想开源的话，依然使用"ISC"也可以
           4.webpack安装有两种方式：
                   全局安装：
                          npm install webpack webapck-cli -g   //安装webpack-cli是让我们正确运行webpack打包命令
                           /*全局安装方式，不推荐使用。*/
                           /*全局安装的问题，如果有两个项目都用webpack打包，而一个是用webpack3.0版本，而另一个使用webpack4.0版本，如果我们安装的是webpack4.0版本的，那用webpack3.0打包的肯定就运行不起来了，并且，如果两个项目有依赖，既要启动webpack3.0又要启动webpack4.0，全局安装webpack是实现不了的。*/
                    项目内安装：
                           在命令行进入项目目录。
                           npm install webpack webpack-cli --save-dev (--save-dev可换成 -D)
                           安装好之后，项目目录中会多出node_modules文件夹，里边就是webpack和webpack所依赖的一些包.
                           运行通过 node提供 npx webpack -v  命令运行
                           npx 会在项目中找webpack包进行运行webpack。
                         /*推荐使用项目内安装webpack*/
                         /*好处是，我们可以用运行两个不同版本的webpack项目*/
                           npm info webpack 查看都有哪些版本号
                           npm install webpack@版本号 -webpack-cli -D
                  node-modules提交git仓库时被删除，
                  当我们要用项目时 通过 npm install 把node_modules文件下载下来，就可以使用webpack项目了.
                  
           webpack配置文件：
                   引入文件不同，打包方法肯定也是也不同的。
           webpack配置文件的文件名     webpack.config.js
                    module.export={
                            mode："production",//还可以填写 development不压缩打包好的代码，production压缩打包好的代码
                            entry:"打包的文件路径"，//要打包的文件
                            output:{//打包好的文件放置的位置
                                   filename:"打包好的文件的名字",//设置打包好的文件名字
                                   path:path.resolve(__dirname , '自定义文件夹')     // 定义一个const path=require('path')
                                   
                              }
                          }
              指定打包文件，命令 npx webpack --config 自己配置的打包配置文件

      简化打包代码：在package.json
                 {
                   “scripts”:{
                           "bundle":"webpack"
                        }
                 }
                  打包命令：npm run bundle 就是执行的 webpack