webpack安装使用(小一万字教程)-CFANZ编程社区

这里写目录标题

webpack从入门到精通

一，webpack产生原因：

（1），前端工程化的要求

二，webpack基础使用：

（1），webpack 是什么

（2），快速上手webpack

①，☕安装 webpack

注意:-D 是 --save-dev 的缩写，表示开发时依赖，只在项目开发阶段用到。 -S 是 --save 的缩写，表示运行时依赖，即项目打包发布运行时要用到。@后面指定是安装版本。

②，☕配置 webpack

module.exports = {
  // mode 用于指定构建模式，可选值有
  // development 和 production
  mode: 'development',
}

注意：这里语法是node.js语法

"scripts" :{
 // 配置好后就能通过 npm run dev 命令执行打包过程
 "dev": "webpack"
}

🍉🍉🍉注意：上面操作执行完成后，所在文件夹文件目录如下：
在这里插入图片描述

👨‍💻👨‍💻👨‍💻小编演示环节：

🌸🌸webpack配置简单说明🌸🌸

🏵，webpack.config.js 文件的作用

🏵，webpack 中的默认约定

🏵，自定义打包入口和出口

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js', // 输出文件的名称
  },
}

注意：path包导入，__dirname得到当前项目文件所在目录的绝对路径。
在这里插入图片描述

（3），webpack相关插件

const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({
  template: './src/index.html', // 指定原文件的路径
  filename: './index.html' // 指定生成文件的路径
})
module.exports => {
  mode: 'development',
  plugins: [htmlPlugin]
}

devServer: {
  open: true, // 初次打包完成后，自动打开浏览器
  host: '127.0.0.1', // 访问地址
  port: 80 // 访问端口号
}

（4），webpack加载器

css-loader 可打包 .css 文件
less-loader 可打包 .less 文件
babel-loader 可打包 webpack 无法处理的 JS 高级语法

module: {
  rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
}

test 表示匹配的文件类型，use 表示对应调用的 loader
use 数组的 loader 顺序是固定的
loader 调用顺序是从后往前

module: {
  rules: [{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }]
}

module: {
  rules: [{ test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229'] }]
}

module: {
  rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]
}

module.exports = {
  // 声明 babel 可用的插件
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}

🍺如果没配安装配置加载器，会报下面的错误：
在这里插入图片描述

（5），打包发布

"scripts": {
  "dev": "webpack serve",
  "build": "webpack --mode production"
}

补充：

npm install clean-webpack-plugin@3.0.0 -D

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// plugins 节点挂载 CleanWebpackPlugin 实例对象
plugins: [htmlPlugin, new CleanWebpackPlugin()]

🏵 生成打包报告，根据报告分析具体的优化方案
🏵 Tree-Shaking
🏵 为第三方库启用 CDN 加载
🏵 配置组件的按需加载
🏵 开启路由懒加载
🏵 自定制首页内容

module.exports = {
  publicPath: './'
}

（6），Source Map

// webpack.config.js 文件
module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
}

小编:薇薇的憨宝

在这里插入图片描述