webpack

含义:

前端项目工程化的具体解决方案,前端最常用的方法

作用:

模块化开发,代码压缩,处理浏览器js兼容问题,性能优化等

前提:

npm init -y 初始化项目

安装:

npm isntall webpack webpack-cli --save-dev

-s 开发生产都用

-D 开发使用

使用:

webpack.config.js

javascript 复制代码
const path = require('path') //调用路径


module.exports = {
  mode: 'development',  //开发模式
  entry: './js/index.js',  //入口文件
  output: {
    filename: 'index.js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  }
}

package.json

javascript 复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

运行npm run build

插件:

webpack-dev-server 保存之后自动更新js文件

下载:npm i webpack-dev-server --save-dev

配置:

javascript 复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --open",
    "build": "webpack"
  },

html-webpack-plugin

下载 :npm install html-webpack-plugin --save-dev

配置:

javascript 复制代码
const path = require('path') //调用路径
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件

module.exports = {
  mode: 'development',  //开发模式
  entry: './js/index.js',  //入口文件
  output: {
    filename: 'index.js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  // 插件
  plugins: [
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
  ]
}

style-loader css-loader

下载:npm install --save-dev style-loader css-loader

javascript 复制代码
const path = require('path') //调用路径
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件

module.exports = {
  mode: 'development',  //开发模式
  entry: './js/index.js',  //入口文件
  output: {
    filename: 'index.js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  module: {
    rules: [
      {
        test:/\.css$/,    //css配置
        use: [ 'style-loader', 'css-loader' ]  
      }
    ]
  },
  // 插件
  plugins: [
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
  ]
}

单独打包:

javascript 复制代码
const path = require('path') //调用路径
const Webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包html的插件
const MiniCssExtractPlgin = require("mini-css-extract-plugin")  // css分离

module.exports = {
  mode: 'development',  //开发模式
  devServer:{
    port: 3000,   //端口号
    hot: true     //热更
  },
  // entry: './js/index.js',  //入口文件
  entry: {      //单独打包js
    'js/index':'./js/index.js',
    'js/axios':'./js/axios.js'
  },  
  output: {   //单独打包js
    // filename: 'index.js',  //输出文件名
    filename: '[name].js',  //输出文件名
    path:path.resolve(__dirname,'./dist') //指定生成的文件目录
  },
  module: {
    rules: [
      {
        test:/\.css$/,    //css配置
        use: [ {
          loader: MiniCssExtractPlgin.loader,  //单独打包css
          options: {
            publicPath: './'
          }
        },
      'css-loader' ]  
      },
      {
        test: /\.(png|jpg|gif)$/,  //img配置
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 2048,
              name: '[name]_[hash:8].[ext]',
              outputPath: 'img'  //单独打包img
            }
          }
        ]
      },
    ]
  },
  // 插件
  plugins: [
    //热更新
    new Webpack.HotModuleReplacementPlugin(),  
    // html 
    new HtmlWebpackPlugin({
      template:  path.resolve(__dirname, './index.html'), //文件模板
      filename:'index.html',  //输出文件名
    }),
    //css  单独打包css
    new MiniCssExtractPlgin({
      filename: "css/index.css"
    })
  ]
}

package.json

javascript 复制代码
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}
相关推荐
慧一居士10 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead12 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js