Web前端框架基础知识-Webpack模块打包器

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

参考链接：
https://blog.csdn.net/qq_42950328/article/details/106488198
https://blog.csdn.net/u014181418/article/details/52709985
https://blog.csdn.net/YZ0826/article/details/79465547

在这里插入图片描述

补充：
enery入口配置：

// 1. String ：单入口， 打包成一个chunk,输出一个bundle文件，chunk的名称为默认。
	entry:'./src/index.js',
// 2. Array ： 多入口， 写多个入口，所有入口文件形成一个chunk(名称默认), 输出只有一个bundle, chunk名称默认
    entry: ["./src/two.js",'./src/index.js'],
// 3. Object: 多入口， 有几个入口文件就生成几个chunk， 并输出几个bundle文件， chunk的名称是key
    entry: {
    	two: "./src/two.js",
    	index:'./src/index.js'
    },
// 4. 特殊用法：
    entry: {
	// 数组中所有入口文件生成一个chunk, 输出一个bundle文件， chunk的名称是key
    	onetwo: ["./src/one.js","./src/two.js"],
	// 形成一个chunk, 输出一个bundle文件
    	index:'./src/index.js'
    },

webpack打包html资源（Plugins配置）：

使用插件(plugins)对HTML文件进行处理（html-webpack-plugin）
使用步骤：1. 下载	2. 引入	3.使用
下载安装：npm i html-webpack-plugin -D
引入插件：const HtmlWebpackPlugin = require('html-webpack-plugin');
使用插件：
 plugins: [
     // 功能：默认会创建一个空的HTML文件，自动引入打包输出的所有资源（JS/CSS）
     // new HtmlWebpackPlugin()
     // 通过参数可以输出有结构的HTML资源
     new HtmlWebpackPlugin({
         // 复制 './src/index.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
         template: "./src/index.html",
         // 默认是index.html名称，通过filename设置输出文件名称
         // filename: "demo.html"
         // 压缩html代码
          minify: {
              // 移除空格
              collapseWhitespace:true,
              // 移除注释
              removeComments:true
          }
     })
 ],
html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的资源（JS/CSS）

webpack打包多html开发案例（多入口）

const resolve= require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 多个entry
    entry: {
        vendor:['./src/js/jquery.js','./src/js/common.js'],
        index:"./src/js/index.js",
        cart:"./src/js/cart.js"
    },
    output:{
      filename:'[name].js',
      path:resolve.join(__dirname,'build')
    },
    module:{
      rules:[

      ]
    },
    plugins:[
        //负责打包html文件  将js注入到html中，minify压缩html
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            filename:"index.html",
            chunks:['index','vendor'],//选择要打包的js文件
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        }),
        new HtmlWebpackPlugin({
            template:"./src/cart.html",
            filename:"cart.html",
            chunks:['cart','vendor'],//选择要打包的js文件
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })
    ],
    mode : 'production',//生产模式 production 开发模式 development
}

webpack打包CSS资源
需要使用npm下载安装两个loader帮我们完成打包

  1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
  2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里

    在这里插入图片描述

    在这里插入图片描述

    注意：在将js和css打包时,需要手动在js文件中引入css文件,require(“css文件”),
# npm i css-loader style-loader -D
# webpack 

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve.join(__dirname, 'build')
    },
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}//从右到左,从下到上
        ]
    },
    plugins: [
        //负责打包html文件  将js注入到html中，minify压缩html
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ],
    mode: 'production',//生产模式 production 开发模式 development
}

webpack打包less或sass资源
因为css只是单纯的属性描述，它并不具有变量、条件语句等，css的特性导致了它难组织和维护。
Sass和Less都属于CSS预处理器，定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加一些编程的特性，将CSS作为目标生成文件，然后开发者使用这种语言进行CSS编码工作.
Less需要使用npm下载less包和less-loader
Sass需要使用npm下载node-sass包和sass-loader

npm i less less-loader -D
npm i node-sass sass-loader -D

在这里插入图片描述

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve.join(__dirname, 'build')
    },
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader','less-loader']},//从右到左,从下到上
            //先通过less-loader将less文件转为css文件,然后再通过style-loader, css-loader对css文件进行操作
            {test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader']}
            //注意sass文件的后缀名是scss
        ]
    },
    plugins: [
        //负责打包html文件  将js注入到html中，minify压缩html
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ],
    mode: 'production',//生产模式 production 开发模式 development
}

根据前面的知识我们知道目前我们打包完成的css文件都是以内嵌式嵌入到heade标签内的,我们也可以尝试将css文件提取成一个独立的文件以外联式嵌入到网页中.

提取CSS为单独文件
css内容是打包在js文件中的， 可以使用”mini-css-extract-plugin”插件提取成单独的CSS文件。

  1. 在webpack.config.js 中引入插件
    const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
  2. 在plugins模块中使用插件
    plugins: [ new MiniCssExtractPlugin() ],
    或通过参数 filename重新命名提职的css文件名
    new MiniCssExtractPlugin({ filename:’./css/demo.css’ })
  3. 在CSS的rules中，使用MiniCssExtractPlugin.loader取代style-loader, 提取js中Css内容为单文件
    { test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 55: … 'css-loader'] }̲ 如果sass和less也提取…/, use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘sass-loader’] }
const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    // 多个entry
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve.join(__dirname, 'build')
    },
    module: {
        rules: [
            {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
            {test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader']},//从右到左,从下到上
            //先通过less-loader将less文件转为css文件,然后再通过MiniCssExtractPlugin.loader, css-loader对css文件进行操作
            {test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader']}
            //注意sass文件的后缀名是scss
        ]
    },
    plugins: [
        //负责打包html文件  将js注入到html中，minify压缩html
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        })
    ],
    mode: 'production',//生产模式 production 开发模式 development
}

处理CSS的兼容性
需要使用postcss处理， 下载两个包post-loader和postcss-preset-env
npm i postcss-loader postcss-preset-env -D
postcss会找到package.json中的browserslist里面的配置，通过配置加载css的兼容性
修改loader的配置， 新版需要写postcss.config.js（手动在webpack根目录创建）, less和sass兼容性同理

在这里插入图片描述

const resolve = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    // 多个entry
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: resolve.join(__dirname, 'build')
    },
    module: {
        rules: [
            {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader']},
            {test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader','postcss-loader']},//从右到左,从下到上
            //先通过less-loader将less文件转为css文件,然后再通过style-loader, css-loader对css文件进行操作
            {test: /\.scss$/, use: [MiniCssExtractPlugin.loader, 'css-loader','sass-loader','postcss-loader']}
            //注意sass文件的后缀名是scss
        ]
    },
    plugins: [
        //负责打包html文件  将js注入到html中，minify压缩html
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
        })
    ],
    mode: 'production',//生产模式 production 开发模式 development
}

压缩CSS
使用optimize-css-assets-webpack-plugin插件压缩CSS内容

  1. 引入插件
    const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’);
  2. 使用插件
    plugins: [ new OptimizeCssAssetsWebpackPlugin() ],

    在这里插入图片描述


    webpack打包图片资源
    需下载url-loader和file-loader两个包， 依赖关系
    在css中引入图片
    参考链接：https://blog.csdn.net/qq_38677540/article/details/107732145

    在这里插入图片描述


    webpack打包其他资源
    不需要优化和压缩处理，直接输出的资源，称为其他资源。比如字体图标等

    在这里插入图片描述


    对js语法配置语法检查eslint
    eslint 是一个开源的 js 代码检查工具，初衷是为了让程序员可以创建自己的检测规则。实际生产中，团队内往往会制订一套统一的标准，让整个团队的编码风格达到一致。
    eslint 其实与 webpack 没有任何关系，两者并不互相依赖，甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置，可以单独使用。
    语法检查使用eslint-loader， 并基于eslint包，只用来检查js语法。
    注意只检查自己写的js源代码， 第三方库是不用检查的， 可以在npmjs.com中查看规则。
    需要使用js来的规则库来检查代码 “airbnb”， 需要eslint-config-airbnb-base和eslint-plugin-import 两个包
    npm i eslint-loader eslint eslint-config-airbnb-base eslint -plugin-import -D
package.json中加入

 "eslintConfig": {
    "extends": "airbnb-base"
  }

webpack.config.js中加入
 {
                test:/\.js$/,
                exclude: /node_modules/,
                loader:'eslint-loader',
                options: {
                    fix:true
                }
      }

在js文件中加入

// 下一行eslint所有规则失效
// eslint-disable-next-line
这两行数据可以使下面所有你不想匹配规则的代码eslint规则失效
console.log('这是入口文件,11111');

原文地址：https://blog.csdn.net/weixin_50583343/article/details/114006301

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 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