webpack从入门到精通学习笔记-第三节课——配置文件与资源打包

分类：Webpack作者：编程之家用户

一、前言

这一部分需要用到webpack的配置文件了webpack.config.js，首先在项目外围创建webpack.config.js文件，如下包括五大核心。

module.exports={
  //指定入口文件
  entry:'',
  //指定输出目录
  output: {  
  },
  //配置打包环境
  mode:'',
  //指定webpack打包时要使用的模块，进行loader配置
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:'',
        use:[
        ],
      },
    ]
  },
  //配置webpack插件
  plugins: [
  ],
}

二、打包js、json资源

1、在入口文件中引入需要的js和json文件即可

import '../js/demo.js'
import data from '../package.json'
(function () {
    setInterval(()=>{
        console.log(data);
    },1000)
})()

2、配置webpack配置文件，因为webpack可以直接打包这两个文件，所以只需要配置好，入口文件，输出目录和打包环境即可。

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
}

三、打包样式文件

1）普通css文件打包
1、首先，需要安装依赖 “css-loader”，“style-loader”，命令为：npm install css-loader style-loader --save-dev

在这里插入图片描述

2、写一个css文件并在入口文件中引入

import '../css/index.css'

3、因为webpack无法直接打包样式文件，这就需要用到webpack配置文件中的的loader加载器了，添加代码

module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
    ]
  },

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
    ]
  }
}

2）css扩展语言如less,scss，sass这里以scss为例
1、首先，需要安装依赖 “css-loader”，“style-loader”，“sass-loader”，命令为：npm install css-loader style-loader sass-loader --save-dev

在这里插入图片描述

2、写一个scss文件并在入口文件中引入

import '../css/scss/index.scss'

3、因为webpack无法直接打包样式文件，这就需要用到webpack配置文件中的的loader加载器了，添加代码

module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  },

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  }
}

四、打包html文件

1、首先，需要安装依赖 “html-webpack-plugin”，命令为：npm install html-webpack-plugin --save-dev

在这里插入图片描述

2、html-webpack-plugin自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件，所以我们需要创建一个模板html，生成的html会以它为模板。

在这里插入图片描述

3、html-webpack-plugin 其实一个插件，这时我们就会用到webpack中的plugins了，在配置文件中添加如下

plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

四、打包图片文件

1）样式文件中的图片
1、首先，需要安装依赖 “url-loader” “file-loader”，命令为：npm install url-loader file-loader --save-dev

在这里插入图片描述


2、在样式中引入图片文件

在这里插入图片描述


3、因为webpack无法直接打包图片文件，这就需要用到webpack配置文件中的的loader加载器了，添加代码

module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ]
      }
    ]
  }

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ]
      }
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

2）html中引入图片文件，由于以上方法无法处理html中引入的图片，所以我们需要增配置。
1、首先，需要安装依赖 “url-loader” “file-loader” “html-loader”，命令为：npm install url-loader file-loader html-loader --save-dev

在这里插入图片描述


2、在之前的模板页面中引入图片

在这里插入图片描述


3、添加配置，并修改打包图片配置

module: {
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              /*问题：因为url-loader默认使用es6模块化解析，而html-loader是commonjs引入
              解析是会出现问题[Obect Module]
              解决关闭url-loader中的es6模块化处理，使用commonjs即可*/
              esModule:false,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ],
        exclude: [/node-modules/]
      },
      {
        test:/\.html$/,
        use:{
          //处理HTML中引入的图片，从而能够被url-loader处理
          loader:"html-loader"
        }
      }
    ]
  }
 }

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              /*问题：因为url-loader默认使用es6模块化解析，而html-loader是commonjs引入
              解析是会出现问题[Obect Module]
              解决关闭url-loader中的es6模块化处理，使用commonjs即可*/
              esModule:false,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ],
        exclude: [/node-modules/]
      },
      {
        test:/\.html$/,
        use:{
          //处理HTML中引入的图片，从而能够被url-loader处理
          loader:"html-loader"
        }
      }
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

五、打包其他文件

所谓其他资源就是不需要经过压缩处理，原样打包的文件，这里这需要将这一类文件放在统一的文件夹里如static，然后打包时排除，此文件以外的所有文件夹和html文件即可。
1、首先，需要安装依赖 “file-loader”，命令为：npm install file-loader --save-dev

在这里插入图片描述


2、添加配置

{
        exclude: [/img/,/js/,/css/,/node-modules/,/\.html$/],
        use: [
            'file-loader'
        ]
      }

3、详细代码

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              /*问题：因为url-loader默认使用es6模块化解析，而html-loader是commonjs引入
              解析是会出现问题[Obect Module]
              解决关闭url-loader中的es6模块化处理，使用commonjs即可*/
              esModule:false,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ],
        exclude: [/node-modules/]
      },
      {
        test:/\.html$/,
        use:{
          //处理HTML中引入的图片，从而能够被url-loader处理
          loader:"html-loader"
        }
      },
      {
        exclude: [/img/,/js/,/css/,/node-modules/,/\.html$/],
        use: [
            'file-loader'
        ]
      }
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

原文地址：https://blog.csdn.net/qq_36288559/article/details/113820056

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

umi 框架 如何配置 自定义 插件 和 loader
一准备工作umi为react的一个封装比较nice的脚手架。优点当然就是安装方便，开箱即用，集成了诸多好用功能，详见官网。当然缺点就是无法暴露原始的webpack.config.json文件，只能按照官方文档上特定的方法进行修改，而文档却并不完善。项目顺利进行大家笑嘻嘻，一旦遇到偏难怪需求，
webpack之shimming的应用(webpack.ProvidePlugin)
webpack在引入两个依赖的包时，可能需要使用shimming，意思是处理代码上的兼容1、在main.js中引入jqueryimport$from'jquery'importappendfrom'./append'//下面的给页面添加元素文件append()2、append.js使用main.js的$向页面中添加元素functionappDomFunc(){
webpack性能优化(TODO)
  Happypack (plugin)多线程使用loader编译文件treeshaking删除无用JS代码，依赖ESM规范source-map生产环境一定去掉process.env.XXX配置环境变量，区分各种编译环境splitchunks 代码分离去重DynamicImport动态加载js文件Hot-module-replacement开发环境热更新w
前端项目架构分析
一目录结构├──build//构建相关├──config//配置相关├──src//源代码│├──api//所有请求│├──assets//主题字体等静态资源│
2、管理资源
接着第一节的demo现在我们尝试整合一些其他资源，比如图像，看看webpack如何处理。在webpack出现之前，前端开发人员会使用grunt和gulp等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。同样方式也被用于JavaScript模块，但是，像webpack这样的工
面试题： Webpack 的 plugin 和 loader 有什么区别
webpack的打包原理识别入口文件通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)webpack做的就是分析代码，转换代码，编译代码，输出代码最终形成打包后的代码什么是loaderloader是文件加载器，能够加载资源文件，并对这些文件进行
全面掌握Webpack4.0 (一)Webpack究竟是什么2 持续更新...
上一篇文章我们在一个demo中见到了webpack的身影，如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”，但事实上webpack可不仅仅可以‘翻译’代码,事实上，webpack是一个‘打包’工具，‘打包‘才是webpack的核心任务。打开webpack的官网：webpack中
webpack前端模块化打包工具(webpack打包css,url,babel等,配置Vue文件依赖,搭建本地服务器和发布项目)
注：本章将配合Vue详细讲解webpack前提条件1.在开始之前，请确保安装了Node.js和npm的最新版本。使用旧版本，你可能遇到各种问题，因为它们可能缺少webpack功能以及/或者缺少相关package包。在cmd中node-v,npm-v可查看对应的版本和安装情况。2.这里会用到ES6的模块化，如果你
vue webpack优化之路
前言、之前我认为对于项目的优化无非是从代码上去优化一些东西，比如循环呀函数式调用呀让你的代码看起来更加的简洁容易懂后来我在面试过程中不断有面试官不断地问了我这些问题所以自己就去研究了一下发现并不是我之前想的那样，一个好的webapck优化的胜过于你在整体代码上
vue03
##一、组件component###1.什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（对象）###2.定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件###3.组件的分
webpack
 #webpack5概述>webpack是一个现代javascript应用程序的**静态模块打包器(modulebundler)**>>vue-cli脚手架环境,集成了webpack,所以才能对各类文件进行打包处理[webpack官网](https://webpack.js.org/) ##webpack能做什么webpack是一个静态模块打包
webpack原理-实现webpack打包js
//这里导入webpack配置，我用对象的形式表示，当然entry属性上定义的文件要有//constconfig=require("./webpack.config");constconfig={entry:'./src/index.js'};const{join,dirname}=require("path");const{readFileSync,writeFileSync}=requi
vux-cli3 项目文件分析 webpack-bundle-analyzer
安装cnpminstallwebpack-bundle-analyzer-D 修改vue.config.jsmodule.exports={chainWebpack:config=>{if(process.env.use_analyzer){//分析config.plugin('webpack-bundle-analyzer')
webpack打包html插件html-webpack-plugin的使用
webpack打包html插件html-webpack-plugin的使用1.创建这样的测试目录结构1）index.html是即将被打包的文件，你可以随便写一些内容2）index.js是打包的入口文件，你可以写或不写内容2.webpack.config.js的代码如下：/***压缩html需要插件：html-webpack=plugin*插件使用方法：
vue init webpack tabbar创建vue项目时出现问题
vueinitwebpacktabbar创建vue项目时出现问题vue:无法加载文件C:\Users\dengqian\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。C:\Windows\System32\WindowsPowerShell\v1.0，找到如上路径，以管理员身份运行powershell.exe即可输入set-ExecutionPolicyRemo
【vue+ECharts】在 webpack 中使用 ECharts
在webpack中使用ECharts【官网教程】1、使用如下命令通过npm 安装EChartsnpminstallecharts--save2、全局引用在main.jsimportechartsfrom'echarts'Vue.prototype.$echarts=echarts;3、运用<divstyle="width:60vw;height:280px;"ref="chart"&
解读 vue-cli 脚手架二：npm run build 的背后
如果没有看过我的上一篇文章，请先移步去看一下哈！时隔一年多，之前写的文章感觉大家还挺喜欢的，一直说要更新下一篇。但是一直没有机会，没时间，还有就是，感觉自己的技术，可能不足以支持我继续往下走。但是经过这个一年多的历练，感觉很多东西考虑的会更周全，不负期待！废话说一堆，步入正题
webpack 创建本地node服务
dist文件配置对应的路由名展示这样的效果可以创建一个本地的服务还可以进行代理项目开发是在src里进行代码逻辑编写./表示本地路径/表示绝对路径(nginx需要配置)
新建webpack-vue项目以及引入element ui组件
 1、用命令创建webpack模板项目vueinitwebpack 项目名，需要选是否的统一选否，所以的依赖手动添加  2、安装依赖vue-router,elementui,sass-loader,node-sass，axios插件安装路由：npminstallvue-router安装elementu
webpack打包后动态修改process.env
最近想把蘑菇博客部署到k8s上，作为一名java搬砖工，搬砖人不讲码德，biu一下就把后端各模块的dockerfile和chart包copy过来了，很快啊！接下来就可以愉快的使用helm管理蘑菇后端服务部署了。部署完后端服务后，准备制作前端镜像，发现前端打包后，无法动态读取系统环境变量，这很头疼，难不
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot