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/')
    }
  }
}

公众号：今日在学