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"
  }
}