webpack

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: "development",//打包的两种模式 development开发模式 production 上线模式，会压缩代码默认为production entry: './src/index.js', output: { path: path.resolve('./build'), filename: 'index.[hash].min.js' }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', hash: true, minify: { collapseWhitespace: true, removeComments: true, removeAttributeQuotes: true, removeEmptyAttributes: true } }), new CleanWebpackPlugin() ], //配置一个类似于live server 的功能，仅仅是为了咱们开发使用的，他能自动创建一个web服务，然后给你打开一个网页，而且还能在你改了开发的代码之后，把页面自动更新，还能配置porxy代理 devServer: { port: 3000,//起服务的端口号 compress: true,//是否压缩 contentBase: path.resolve('./build'),//资源路径 open: true,//自动打开浏览器 hot: true,// 热更新 proxy: { "/user": "http://127.0.0.1:888"//将/user的请求导入到http://127.0.0.1:888上 } } }## webpack

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "dev":"webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}

打包文件放在src文件夹内

public文件夹内放模板html

手动配置需要加一个webpack.config.js文件

// 当前webpack的自定义配置模块必须放到根路径下

// 在这里可以对webpack编译打包的过程进行自定义的配置
// webpack是基于node开发的，所有在配置的时候，用的是node里的导入导出规范
const path = require('path');

// 生成html模板的
const HtmlWebpackPlugin = require('html-webpack-plugin');

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// CleanWebpackPlugin清除之前的打包的内容的
module.exports = {
  // 配置打包的入口文件的位置
  entry:'./src/index.js',

  // 配置打包之后生成的文件夹的位置和文件的名字
  output:{
    path:path.resolve('./build'), // 文件夹的路径
    filename:'index.[hash].min.js' // 编译完成的文件的名字
    // filename:'index.[hash].min.js'
    // hash的值每一次打包生成的都不一样,就是为了让每一次打包之后的js为文件名都不一样
  },
  // 在webpack中使用plugins插件
  plugins:[
    // webpack在编译的时候，会把当前的模板html进行读取，然后把最新打包的js文件引入到模板中，然后生成一个新的html文件放到build文件夹中
    new HtmlWebpackPlugin({
      // 当前模板的路径
        template:'./public/index.html',
        filename:'ss.html', // 当前生成的html的文件名
        hash:true, // 他会在当前html里引入js的连接上拼接一个hash值(这里的hash和上边output里的hash是一样的，都是为了防止走缓存的)
        minify:{
          // 配置html压缩的
          collapseWhitespace: true, // 把标签之间的空格去掉
        removeComments: true, // 去掉注释
        removeAttributeQuotes: true, // 把属性的双引号去掉
        removeEmptyAttributes: true // 去掉行间的空属性
        }
    }),
    //去掉之前的
    new CleanWebpackPlugin()
  ],
  //配置一个类似于live server 的功能，仅仅是为了咱们开发使用的，他能自动创建一个web服务，然后给你打开一个网页，而且还能在你改了开发的代码之后，把页面自动更新，还能配置porxy代理
  devServer:{
      port:3000,//起服务的端口号
      compress:true,//是否压缩
      contentBase:path.resolve('./build'),//资源路径
      open:true,//自动打开浏览器
      hot:true// 热更新
  }
}

webpack是一个现代js的应用程序的静态模块打包工具，当webpack处理应用程序时，他会在内部构件一个依赖图，此依赖图会映射项目所需的每一个模块并生成一个或者多个bundle包，webpack本身是基于node.js开发的

webpack的作用：

• 代码转换：ts编译成js；less、scss编译成css；es6、es7编译成es5；虚拟dom编译成真实dom等
• 文件优化：压缩js、css、html文件；压缩合并图片，图片base64等
• 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码
• 模块合并：在采用模块化的项目里，会有多个模块和文件需要构建功能把模块分类合并成一个文件
• 自动刷新：监听本地源代码的变化，自动重新构建，刷新浏览器
• 代码校验：ESLint代码规范校验，和检查，单元检测等

(webpack本身不大，但是咱们要是实现某一些功能，还要往webpack中加一个模块来实现)

1.模块化开发的发展史

• 有利于代码分离、解耦以及复用
• 团队并行开发
• 避免命名冲突
• 相互引用，按需加载

模块化的发展史

• 单例设计模式
• AMD(异步模块定义require.js)
• CMD(通用模块定义)
• CommonJS(一般用于服务器开发，例如node.js) 导出module.exports={} 导入require('地址')
• ES6 Module(js官方标准模块定义方式)
  • 1.导出export{} 导入 import 自定义名 from 地址，改名就是import * as hh from 地址，hh是一个对象，将全部的导入
  • 2.导出export var a=1; 导入 import {a} from 地址
  • 3.导出改名字要用as var a=1; export{a:as} 导入 import {as} from 地址,导入也一样，也得用as
  • 导入的东西是只读的，不能修改
  • 导入一般放在最上面，因为es6module是静态加载，会提前把所有的导入加载

以后咱们的vue、react都是按照模块化思想开发的，每一个页面由一个或者多个模块组成，最后多个模块拼装成一个大页面

在真实的项目开发中，我们的模块化思想，就是基于CommonJS和ES6Module两种规范解析,而webpack支持解析这两种规范

npx，当前没有，访问全局，如npx lessc index.less index.css

--save 生产依赖可以简化为-S --save-dev开发依赖 可以简化为-D

安装到全局的特点

1. 所有项目都能用
2. 可以使用命令
3. 版本可能会冲突
4. 安装在全局不能基于CommonJS等模块规范进行导入导出

安装到本地的特点

1.当前项目可以使用 2.不可以使用命令 3.版本不会冲突 4.可以基于CommonJS等模块规范进行导入导出

真实项目中 一般都是既安装在本地，也安装到全局

1.npx[5.5版本以上] 2.本地可执行的文件(放到scripts中)

npm速度优化 nrm yarn

npm i nrm -g 全局安装nrm nrm ls 查看源目录 nrm use xxx 切换源

跑环境和依赖项