webpack学习笔记 （简单打包库）

Library的打包//库文件夹
   第一步初始化
    npm init -y
    创建一个package.json文件
    
  创建一个文件夹 src 在src文件夹下创建。
  创建一个文件math.js //写入函数加减成除
  创建一个文件string.js //写入关于字符串的处理函数
  创建一个index.js文件 //引入上边的两个文件，并导出，这就是一个库
  webpack对于刚才的库打包
   需要配置：webpack.config.js
   

output:{
          //添加三个配置
          filename:'library.js',
          library:'library',//自己定义的变量名
          libraryTarget:'umd'//node下可以改为global，一般为umd
        }

      如果项目中重复引入使用lodash
     

module.export={
          //添加一个配置，意思是遇到lodash不对它进行打包。忽略这个库
           externals:["lodash"]
       }
       module.export={
            //另一种配置
             externals:{
                  root:"_",//引入使用script标签
                  //文件名必须是lodash
                lodash:{
                       commonjs:'lodash'
                 }
              }
            }

progressive Web Application
     PWA //比较新的前端技术
     webpack配置保留最常用的配置。

传统方式
      //安装http-server是为了让打包好的项目在服务器上运行
      安装 npm i http-server --save-dev
      在package.json中配置
     

“scripts”:{
          //添加配置,让dist目录运行http-server的命令
           “start”:"http-server  dist"
         }

PWA方式
     //安装插件 
     npm i workbox-webpack-plugin --save-dev
     //只有要上线的代码才需要PWA,所以只需要改webpack.prod.js文件就好
     //引入插件,服务器关了也有之前缓存的数据
     

const WorkboxPlugin = require("wrokbox-webpack-plugin")
     plugins:[
            //添加
             new WorkboxPlugin.GenerateSW({
                  clientsClaim:true,
                  skipWaiting:true
               })
           ]

        在
       

if('serviceWorker' in navgator){
               window.addEventListener('load',()=>{
                         navigator.serviseWorker.register('/servise-worker.js').then((registration)=>{console.log('servise-workwe registed'}).catch((error)=>{console.log('servise-worker register error')})
                  })
              }

        重新打包，然后npm run start,让服务器运行起来。这样就缓存起来了，当服务器挂掉的时候，我们依然有之前的数据。

TypeScript的打包配置，提升后期维护能力，代码约束规范。
        //配置支持TypeScript语法
        //初始化一个package.json文件//npm init -y
        //新建一个webpack.config.js文件
        //安装 npm i webpack webpack-cli --save-dev
        //创建一个文件 index.tsx TypeScript文件
        //进入官网：https://www.typeScriptlang.org
        //进入Playground,基本的TypeScript语法
  //打包编译配置
 

module.export={
        entry:'./src/index.tsx',
        output:{
               filename:'bundle.js',
               path:path.resolve(__diranme,'dist')
           },
         module:{
             rules:[{
                 test:/\.tsx?$/,
                 use:'ts-loader',//官方提供的loader
                 exclude:/node_modules/ //如果是node_modules里的tsx文件就不进行打包，
              }]
          }
  }       

//安装 npm i ts-loader typescript --save-dev
   //在根目录下创建一个 tsconfig.json文件
   //在里边添加配置
   

{
     "compileOptions":{
             "output":'./dist',
             "module":'es6'，//使用es6模块引入方式
             "target":"es5"，//打包成es5格式
             "allowJs":true,//允许引入js文件
          }
    }

//运行打包命令 npm run build  
//打包完成

总结：TypeScript好处,代码更严谨，每个声明出的变量更具体，比如String,Number……，代码更好维护。

//需要一些报错信息需要按装
npm i @type/lodash --save-dev

//引入格式
import *as _ from 'lodash';
//使用某种文件都需要安装
https://github.com
//可以搜索  types  可以安装 @types/node。
//搜索相应的类型，找到可以安装的相对应的文件。
//如果前边有 DEPRECATED 说明即将要废弃了。

使用WebpackDevServer 实现请求转发。
//npm run start 启动的是 webpack-dev-server
//需要ajax请求的话需要按装 npm i axios --save-dev
//在react中可以在生命周期函数 componentDidMount(){}中进行数据请求
//如果有跨域，在webapck.config.js文件中进行配置
   //只有在开发环境下有用

devServer:{
     proxy:{ //进行判断某个接口之后转发请求
             '/react/api ':{
                    target:'http://www.dell-lee.com'//跨域地址当我们改了配置要重启服
                    //如果对于https进行转发需要配置
                     secure:false,
                    pathRewrite:{
                                'header.json':'demo.json'
                             },        
                       changeOrigin:true,//有些网站防止外部爬虫爬取内容就阻止我们访问，配置这个配置项就是突破限制 , 平时带着就行        
                            }
              }
 }

WebpackDevServer 单页面路由的问题
       npm i react-router-dom --save
 //安装后引入
 import {BrowserRouter , Route } from "react-router-dom";

 组件中返回路由
   

render(){
          return(
                    //使用路由根标签
                   <BrowserRouter >
                         <div>
                               //路由配置，点击进入对应的详情页
                            <Route path="/" exact  component={Home} />
                            <Route path="/list" component={List} /> 
                         </div>
                  </BrowserRouter >
            )
    }

//webpack.config.js中配置
   

devServer:{
          //添加配置项，加载的都是首页内容，只要没有匹配的路由的时候
            historyApiFallback:true,//也可以改成{[中间是正则]}
     }

//官网地址 https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback
//路由可以正常使用了

EsLine 在webpack中的配置
//EsLine和webpack其实关系不大
//代码是否规范，引入规范，EsLint代码规范，可以自定义。
npm i eslint --save-dev
npx eslint --init //快捷生成eslint规范 选择第一项 之后选择 第一项 之后选择是否使用react  一路y 回车  就初始化好了

新建一个.eslint.js文件，然后在里边配置规范

module.exports={
         "extends":"airbnb",//使用规范
         //使用前按装 npm i babel-eslint --save
         "parser":"babel-eslint",
   }

//安装好之后怎么使用
如果想对src文件夹下判断是否符合规范
命令 npx eslint src //然后返回结果
//如果想要方便的解决问题，可以使用Vscode编辑器安装Eslint插件。
//参考官网地址： https://webpack.js.org/loader/eslint-loader/