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"
  }
}
相关推荐
joykit16 分钟前
threejs 四元数
前端
Joyee69125 分钟前
RN 的初版架构——通信机制
前端·react native
Swift社区26 分钟前
从 0 到 1 构建一个完整的 AGUI 前端项目的流程在 ESP32 上运行
前端·算法·职场和发展
fox_28 分钟前
JS: 实现扁平化函数 flat
javascript
剽悍一小兔33 分钟前
小程序到底用Store还是LocalStorage ?
javascript
一只小风华~1 小时前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
Jerry_Rod1 小时前
react+umijs 项目快速学习
前端·react.js
京东云开发者1 小时前
浅析cef在win和mac上的适配
前端
uhakadotcom1 小时前
在chrome浏览器插件之中,options.html和options.js常用来做什么事情
前端·javascript·面试