浅谈webpack配置

其他 2020-04-19 14:20:31 阅读次数: 0

该文章的webpack配置基于4.x版本。

webpack简介

本质上，webpack 是一个现代 JavaScript 应用程序的_静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个_依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack安装

执行cmd命令安装（淘宝镜像安装 全局安装）

cnpm i webpack webpack-cli -g

npm init

生成package.json文件

image.png

打包命令

webpack

默认入口文件 为 src/index.js 默认的输出的文件 是 dist/main.js （该文件压缩过）

image.png

image.png

如果需要未压缩版的main.js可以执行命令

webpack --mode development

image.png

默认是生产环境的 也就是压缩版本的

webpack --mode production
//等价于
webpack

webpack.config.js的配置

wepack四个核心概念

  • 入口(entry) 入口的文件的配置处
  • 输出(output) 输出的文件的配置处
  • loader: loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块
  • 插件(plugins) 使用插件可以更有效打包优化和压缩。

webpack.config.js的基本配置


//webpack.config.js
const path=require('path');
//遵循common.js规范
module.exports={
  //指定入口文件
  entry:'./src/index.js',
  //输出文件的配置
  output:{
    //指定输出文件的目录路径
    path: path.resolve(__dirname,'public'),
    //指定输出文件的文件名
    filename: 'bundle.js'
  }
}

再执行 webpack 打包命令，生成 bundle.js

image.png

配置webpack-dev-server服务器

  1. 安装dev-server
cnpm i webpack-dev-server -S
  1. package.json配置
{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --inline"  //配置服务器
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}
  1. webpack.config.js
//webpack.config.js
const path=require('path');
//遵循common.js规范
module.exports={
  //指定入口文件
  entry:'./src/index.js',
  devServer:{
    contentBase:'./public',//根目录
    port:8888, //端口号

  },
  //输出文件的配置
  output:{
    //指定输出文件的目录路径
    path: path.resolve(__dirname,'public'),
    //指定输出文件的文件名
    filename: 'bundle.js'
  }
}

配置css-loader和file-loader

loader：加载程序

要读取style.css 需要安装 style-loader 和css-loader
针对文件路径 ，需要安装 file-loader

cnpm i style-loader css-loader -S
cnpm i file-loader -S

配置代码

//webpack.config.js
const path=require('path');
//遵循common.js规范
module.exports={
  //指定入口文件
  entry:'./src/index.js',
  devServer:{
    contentBase:'./public',//根目录
    port:8888, //端口号

  },
  //该模块用于存放loader配置项
  module:{
    //规则
    rules:[
      //每一个loader配置项
      {
        test:/\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|jpeg)$/,
        use:['file-loader']
      }
    ]
  },
  //输出文件的配置
  output:{
    //指定输出文件的目录路径
    path: path.resolve(__dirname,'public'),
    //指定输出文件的文件名
    filename: 'bundle.js'
  }
}

image.png image.png

背景图能正常显示

image.png

webpack插件

使用html-webpack-plugin插件 ,该插件就是为了保证src目录和public目录生成的文件一致

首先是安装

cnpm i html-webpack-plugin -S

配置代码

//webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//遵循common.js规范
module.exports={
  //指定入口文件
  entry:'./src/index.js',
  devServer:{
    contentBase:'./public',//根目录
    port:8888, //端口号

  },
  //该模块用于存放loader配置项
  module:{
    //规则
    rules:[
      //每一个loader配置项
      {
        test:/\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|jpeg)$/,
        use:['file-loader']
      }
    ]
  },
  mode:'production',
  //插件存放区域
  plugins:[
      new HtmlWebpackPlugin({
        template:"./src/index.html",
        
        minify:{
          //去除引号
          removeAttributeQuotes:true,
          //去除注释
          removeComments:true, 
          //去除空属性
          removeEmptyAttributes:true,
          //去除空格
          removeTagWhitespace:true 
        }
      })
  ],
  //输出文件的配置
  output:{
    //指定输出文件的目录路径
    path: path.resolve(__dirname,'public'),
    //指定输出文件的文件名
    filename: 'bundle-[hash].js'
  }
}

处理html中的img标记的图片路径问题

使用html-withimg-loader

安装

cnpm i html-withimg-loader -S

配置代码

//webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//遵循common.js规范
module.exports={
  //指定入口文件
  entry:'./src/index.js',
  devServer:{
    contentBase:'./public',//根目录
    port:8888, //端口号

  },
  //该模块用于存放loader配置项
  module:{
    //规则
    rules:[
      //每一个loader配置项
      {
        test:/\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|jpeg)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              //去除图片路径上default对象
              esModule:false
            }
          }
        ]
      },
      {
        test:/\.(htm|html)$/i,
        loader:'html-withimg-loader'
      },
    ]
  },
  mode:'production',
  //插件存放区域
  plugins:[
      new HtmlWebpackPlugin({
        template:"./src/index.html",
        
        minify:{
          //去除引号
          removeAttributeQuotes:true,
          //去除注释
          removeComments:true, 
          //去除空属性
          removeEmptyAttributes:true,
          //去除空格
          removeTagWhitespace:true 
        }
      })
  ],
  //输出文件的配置
  output:{
    //指定输出文件的目录路径
    path: path.resolve(__dirname,'public'),
    //指定输出文件的文件名
    filename: 'bundle-[hash].js'
  }
}

image.png

图片正常显示

image.png

字体图标的引入

//webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//遵循common.js规范
module.exports={
  //指定入口文件
  entry:'./src/js/index.js',
  devServer:{
    contentBase:'./public',//根目录
    port:8888, //端口号

  },
  //该模块用于存放loader配置项
  module:{
    //规则
    rules:[
      //每一个loader配置项
      {
        test:/\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|jpeg)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              //去除图片路径上default对象
              esModule:false,
              //设置文件路径
              name:'./img/[hash].[ext]'
            }
          }
        ]
      },
      {
        //img路径
        test:/\.(htm|html)$/i,
        loader:'html-withimg-loader'
      },
      {
       //字体图标
        test:/\.(woff|ttf|svg|eot|xttf|woff2)$/,
        use:[
          {
            loader:'file-loader',
            options:{
              name:'./fonts/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  mode:'production',
  //插件存放区域
  plugins:[
      new HtmlWebpackPlugin({
        template:"./src/index.html",
        
        minify:{
          //去除引号
          removeAttributeQuotes:true,
          //去除注释
          removeComments:true, 
          //去除空属性
          removeEmptyAttributes:true,
          //去除空格
          removeTagWhitespace:true 
        }
      })
  ],
  //输出文件的配置
  output:{
    //指定输出文件的目录路径
    path: path.resolve(__dirname,'public'),
    //指定输出文件的文件名
    filename: 'js/bundle-[hash].js'
  }
}

提取分离css

插件安装

cnpm i extract-text-webpack-plugin@next -S

配置代码

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//遵循common.js规范
module.exports = {
  //指定入口文件
  entry: './src/js/index.js',
  devServer: {
    contentBase: './public', //根目录
    port: 8888, //端口号

  },
  //该模块用于存放loader配置项
  module: {
    //规则
    rules: [
      //每一个loader配置项
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use:[{
            loader: "css-loader",
            options:{
              
            }
          }],
          publicPath:'../'
        })
      },
      {
        test: /\.(jpg|png|jpeg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            //去除图片路径上default对象
            esModule: false,
            //设置文件路径
            name: './img/[hash].[ext]'
          }
        }]
      },
      {
        //img路径
        test: /\.(htm|html)$/i,
        loader: 'html-withimg-loader'
      },
      {
        //字体格式
        test: /\.(woff|ttf|svg|eot|xttf|woff2)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[ext]'
          }
        }]
      }
    ]
  },
  mode: 'production',
  //插件存放区域
  plugins: [
    //提取分离css插件
    new ExtractTextPlugin('./css/[name].css'),
    new HtmlWebpackPlugin({
      template: "./src/index.html",

      minify: {
        //去除引号
        removeAttributeQuotes: true,
        //去除注释
        removeComments: true,
        //去除空属性
        removeEmptyAttributes: true,
        //去除空格
        removeTagWhitespace: true
      }
    })
  ],
  //输出文件的配置
  output: {
    //指定输出文件的目录路径
    path: path.resolve(__dirname, 'public'),
    //指定输出文件的文件名
    filename: 'js/bundle-[hash].js'
  }
}

如图
image.png

压缩
webpack.optimize.UglifyJsPlugin

babel配置 (解析es6的语法）

核心： babel-core
功能： babel-loader babel-preset-env babel-preset-react

image.png

安装 -D表示开发依赖

cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
cnpm  i @babel/preset-env  -D
cnpm i  @babel/preset-react -D
cnpm i @babel/plugin-proposal-class-properties -D

.babelrc的配置

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
}

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//遵循common.js规范
module.exports = {
  //指定入口文件
  entry: './src/js/index.js',
  devServer: {
    contentBase: './public', //根目录
    port: 8888, //端口号

  },
  //该模块用于存放loader配置项
  module: {
    //规则
    rules: [
      //每一个loader配置项
      {
        test:/\.(jsx|js)$/,
        use:{
          loader:"babel-loader",
          // options:{
          //   presets: ["@babel/preset-env", "@babel/preset-react"]
          // }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use:[{
            loader: "css-loader",
            options:{
              
            }
          }],
          publicPath:'../'
        })
      },
      {
        test: /\.(jpg|png|jpeg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            //去除图片路径上default对象
            esModule: false,
            //设置文件路径
            name: './img/[hash].[ext]'
          }
        }]
      },
      {
        //img路径
        test: /\.(htm|html)$/i,
        loader: 'html-withimg-loader'
      },
      {
        //字体格式
        test: /\.(woff|ttf|svg|eot|xttf|woff2)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[ext]'
          }
        }]
      }
    ]
  },
  mode: 'development',
  //插件存放区域
  plugins: [
    //提取分离css插件
    new ExtractTextPlugin('./css/[name].css'),
    new HtmlWebpackPlugin({
      template: "./src/index.html",

      minify: {
        //去除引号
        removeAttributeQuotes: true,
        //去除注释
        removeComments: true,
        //去除空属性
        removeEmptyAttributes: true,
        //去除空格
        removeTagWhitespace: true
      }
    })
  ],
  //输出文件的配置
  output: {
    //指定输出文件的目录路径
    path: path.resolve(__dirname, 'public'),
    //指定输出文件的文件名
    filename: 'js/bundle-[hash].js'
  }
}

引入第三方库，类似jquery

安装

cnpm i jquery -S

引入
image.png

效果图

image.png

汇而不置
发布了49 篇原创文章 · 获赞 3 · 访问量 5107
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43487066/article/details/105015528
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022