webpack-前端工程化

来源博客:【Harryの心阁

实际前端开发

  1. 模块化(js)
  2. 组件化(ui)
  3. 规范化
  4. 自动化(构建,部署,自动化测试)

初识webpack

  • 功能: 代码压缩混淆, 处理浏览器JavaScript的兼容性, 性能优化
  • 定义: 解决前端工程化的具体解决方案

初始化配置

  • npm install init -y 初始化package.json
  • -S --save, 将下载的包名和版本号 装到dependencies下(开发和部署)
  • -D --save-dev, 将包记录到devDependencies(只在开发过程中)
  • 安装webpack npm i webpack@5.42.1 webpack-cli@4.7.2 -D
  • 在根目录下配置webpack.config.js 配置当前的环境mode 有两种选择 development和production
  • 运行webpack 在package.json 下的scripts中配置webpack命令
  • 要想实现webpack压缩功能将webpack.config.js模式修改为production

entry指定打包入口

  • 表示要处理的那个文件
  • 使用path模块path.join(__dirname, '')

output指定打包出口

  • 数据类型对象 path 指定存放的目录 filename 生成的文件名

安装插件

  • 安装webpack-dev-server@3.11.2 -D 实现实时自动打包
  • 将打包的文件生成到内存中, 不是物理磁盘中
  • 使用时将srcipt中的地址改为根目录/使用地址http://localhost:8080访问

安装html-webpack-plugin

  • npm i html-webpack-plugin@5.3.2 -D
  • 把指定的页面加入复制到根目录, 内存中
const path = require('path')
// 导入html-webpack-plugin 
const HtmlPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const html = new HtmlPlugin({
  // 指定复制的页面
  template: './src/index.html',
  // 指定复制出来的文件名和存档路径
  filename: './index.html'
})
module.exports = {
  mode: 'development', //productions,
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  plugins: [html]
}

devSever 节点

  • 自动打开生成的网站, 展示网页效果
  devServer: {
    open: true,
    port: 9090, //自定义端口号
    host: '127.0.0.1' // 指定打开地址
  }

loader 加载器

  • 处理非.js文件
  • 打包处理css文件 npm i style-loader@3.0.0 css-loader@5.2.6 -D
  • 当webpack发现某个文件处理不了的时候, 活查找webpack.confing.js这个配置文件中的module.rules数组中, 是否配置了对象的loader加载器
  • 打包处理less文件 npm i less-loader@10.0.1 less@4.1.1 -D
  • 打包图片的路径 npm i url-loader@4.1.1 file-loader@6.2.0 -D 可传递参数 limit 加上参数<=limit大小的图片 才会被转换成base64, 单位字节
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: 'url-loader'
      }
    ]
  }
  • 使用babel-loader对js进行打包处理, 处理webpack无法处理的js高级语法 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D 在根目录下创建一个babel.config.js文件 将插件配置写入 [["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties"]]
module.exports = {
  plugins: [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }]
  ]
}

配置build命令

  • 创建一个scripts 脚本 webpack --mode production
  • 将文件统一放到某个文件下 js配置path 图片在url中以地址方式传递outputPath参数
  • 使用clean-webpack-plugin插件将原来的dist文件先清理在生成

Source Map

  • 存储着原来的位置信息
  • 定位源代码的位置, 在配置文件中加入devtool:'evel-source-map' 开发环境下
  • 在发布项目时, 能定位行号, 但是不暴露源代码 nosources-source-map 生产环境下
  • 可以定位和显示源代码 使用source-map
  • @表示src源代码目录
  resolve: {
    alias: {
      "@": path.join(__dirname, './src/')
    }
  }

webpack.config.js最终配置

const path = require('path')
// 导入html-webpack-plugin 
const HtmlPlugin = require('html-webpack-plugin')
// 创建插件的实例对象
const html = new HtmlPlugin({
  // 指定复制的页面
  template: './src/index.html',
  // 指定复制出来的文件名和存档路径
  filename: './index.html'
})
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
module.exports = {
  devtool: 'nosources-source-map', // eval-source-map
  mode: 'development', //productions,
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/main.js'
  },
  plugins: [html, new CleanWebpackPlugin()],
  devServer: {
    open: true,
    port: 9090, //自定义端口号
    host: '127.0.0.1' // 指定打开地址
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: 'url-loader?limit=447&outputPath=images'
      },
      // 处理高级的js语法
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: '/node_modules/'
      }
    ]
  },
  resolve: {
    alias: {
      "@": path.join(__dirname, './src/')
    }
  }
}

公众号:今日在学

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Harry-iu

顺手给小编加个鸡腿????

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值