webpack4.0详细 从0到1

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

什么是webpack，模块打包机，功能就是通过入口将所有得依赖关系打包成静态资源。

功能：
1.实现代码得转换（es6转es5，css转换）
2.文件优化（压缩代码体积，合并文件等）
3.代码分割（公共模块得抽离，路由懒加载）
4.模块合并（功能分类合并模块）
5.自动刷新（热更新）
6.代码校验
7.打包后自动发布

1.Webpack 安装（找一个空文件夹）

1、npm init -y（也可以不加y）后面添加 -y参数，帮助我们自动进行确认，直接生成项目
2、npm install webpack@4.0.0 webpack-cli -D
注：这里不推荐全局安装，全局和局部都装了得话，webpack命令会使用全局得得webpack,而npm使用得是局部得webpack,这就有可能导致构建失败
2.1、我安装得时候出现了问题npx webpack -v 没反应也没报错，可以分布装
npm install webpack@4.0.0 -g
npm install webpack-cli -D

在这里插入图片描述

2.打包指令npx webpack
npx webpack 执行得是modules中.bin文件夹下得webpack.cmd

在这里插入图片描述

当前文件夹下插好node.exe，如果不存在，就执行…\webpack\bin\webpack.js
查看webpack.js中会发现必须依赖于webpack-cli，所以得安装!

在这里插入图片描述

接下来，我们创建一个src文件夹，里面创建index.js，里面随便输入，执行npx webpack，会发现打包到dist文件夹中了

3.webpack得基础配置webpack.config.js。默认得是0配置比较弱

注意：如果要改名改成其他得 abc.js,
1.打包执行npx webpack --config abc.js
2.写个脚本，在package.json 中加入
“scripts”: {
“build”: “webpack --config webpack.config.js”
},然后运行npm run build

let path=require("path");       //内置模块，相对路径解析成绝对路径
module.exports={
    mode:"development",    //模式默认两种  production 开发  development(代码不压缩) 
    entry:"./src/index.js",    //入口
    output:{
        filename:"bundle.js",   //打包后得文件名
        path:path.resolve(__dirname,'dist'),        //路径必须是绝对路径,__dirname当前目录下，不加也可以
    }
}

4.webpack-dev-server 服务 npm i webpack-dev-serve -g
这是一个小型node.js express服务器，用来实现一个静态服务

2个功能
1.自定刷新inline 和 iframe
2.自动打包（打包在内存中）

写入脚本

package.json
"scripts": {
    "serve": "webpack-dev-server"
  },

在这里插入图片描述

注意：webpack webpack-cli webpack-dev-server得版本会有冲突，下面是我用得

在这里插入图片描述


接下来npm run serve 成功

在这里插入图片描述


配置webpack-dev-server

webpack-config.js
// 开发服务得配置 webpack-dev-serve
    devServer: {
        prot: "4000", //端口号
        progress: true, //进度条
        contentBase: path.resolve(__dirname, "dist"), //指向这个目录
        compress: true, //自动打开浏览器
    },

5.增加html模板 html-webpack-plugin
上术操作下来，打包后是没有index.html得。

安装插件：npm i html-webpack-plugin -D
功能：1.创建生成入口文件html
2.生成哈希值防止缓存

webpack-config.js
// 插件
顶部引入 let HtmlWebpackPlugin = require("html-webpack-plugin");
    plugins: [
        // html 模板 pub 静态资源文件夹，打包后自动根据pub/index.html，生成indexxxxx.html在dist中
        new HtmlWebpackPlugin({
            template: "./pub/index.html",
            filename: "indexxxx.html",
            // 打包后得html 也压缩
            minify: {
                removeAttributeQuotes: true, //删除html中得双引号
                collapseWhitespace: true, //折成一行
            },
            hash: true, //哈希值
        }),
    ],
    哈希值还有一种也可以[hash：8] 长度 
    output: {
        filename: "bundle[hash].js", //打包后得文件名  加上这个[hash]  产生一个哈希值
        path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
    },

在这里插入图片描述


6.样式处理，解析css less模块
webpack默认只支持加载js模块，现在需要引入样式。需要用到loader加载器

src下创建

index.css
@import "./c.css";
body{
    background: red;
}
c.sss
body{
    font-size: 30px;
}
le.less
body{
    background: yellow !important;
    div{
		transform: rotate(50deg);
	}
}
index.js
require("./index.css");

接下来安装style-loader css-loader

npm i style-loader -D 将css写入到html
npm i css-loader -D 解析@import等语句
npm i less-loader -D 解析less==》css
npm i mini-css-extract-plugin -D css外链

配置文件，loader得顺序是右往左

// 模块加载
   module: {
        // loader 模块转换器
        rules: [
            //规则 css-loader 解析@important这种语法
            //style-loader 把css插入到head得标签中(也可以是底部)
            // less-loader 解析less成css
            // loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左,从下往上
            // loader还可以写成对象方式
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: "style-loader",
                    //     options: {
                    //         // insertAt: "top", //css打包之后在顶部 默认在底部
                    //     },
                    // },
                     MiniCssExtractPlugin.loader,
                    "css-loader",
                ],
            },
            // 处理less  sass stylus...
            {
                test: /\.less$/,
                use: [
                    // {
                    //     loader: "style-loader",
                    //     options: {
                    //         // insertAt: "top", //css打包之后在顶部 默认在底部
                    //     },
                    // },
                     MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                ],
            },
        ],
    },

效果

在这里插入图片描述

自动兼容样式插件autoprefixer和postcss-loader

npm i autoprefixer postcss-loader -D

配置文件

rules: [
            //规则 css-loader 解析@important这种语法
            //style-loader 把css插入到head得标签中(也可以是底部)
            // less-loader 解析less成css
            // loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左
            // loader还可以写成对象方式
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: "style-loader",
                    //     options: {
                    //         insertAt: "top", //css打包之后在顶部 默认在底部
                    //     },
                    // },
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",	//放在css加载之前
                ],
            },
            // 处理less  sass stylus...
            {
                test: /\.less$/,
                use: [
                    // {
                    //     loader: "style-loader",
                    //     options: {
                    //         // insertAt: "top", //css打包之后在顶部 默认在底部
                    //     },
                    // },
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader",
                ],
            },
        ],

需要外面有个配置文件，根目录下新建postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8", //'last 2 versions', // 所有主流浏览器最近2个版本
            ],
            // grid: true,
        },
    },
};

压缩CSS，插件optimize-css-assets-webpack-plugin 用了这个插件js也必须用插件压缩

npm i optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

配置文件

// 优化项
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin(), //css压缩 用了这个插件之后js 压缩也必须要插件 uglifyjs-webpack-plugin
            new UglifyjsWebpackPlugin({
                cache: true, //是否用缓存
                parallel: true, //是否并发打包，可以打包多个
                sourceMap: false,
            }),
        ],
    },

7.js语法转换
装得插件比较多，核心是babel 官网https://www.babeljs.cn/，插件可以在上面找

babel-loader
------------------es6转换----------------------
@babel/core
@babel/preset-env
------------------class转换---------------------
@babel/plugin-proposal-class-properties
--------------------语法 @log 装饰器 转换--------------------------
@babel/plugin-proposal-decorators
-------------------可以转换异步得语法，比如promise,----------------------------
@babel/plugin-transform-runtime
@babel/runtime
-------------------可以转换es7语法，比如includes, 全局引入require("@babel/polyfill");----------------------------
@babel/polyfill

配置 ----------------------------include: path.resolve(__dirname, “src”), //只在src下找

module{
	rules:{
		// js语法转换
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        // 插件库，预设
                        presets: [
                            "@babel/preset-env", //js es6语法转换
                        ],
                        plugins: [
                            [
                                "@babel/plugin-proposal-decorators",
                                { legacy: true },
                            ], //语法 @log 装饰器 转换
                            "@babel/plugin-proposal-class-properties",//转换 class   es7语法使用@babel/polyfill,全局require
                            "@babel/plugin-transform-runtime", //可以转换异步得语法，比如promise, 做了简单得优化，比如抽离公共得部分
                        ],
                    },
                     include: path.resolve(__dirname, "src"), //只在src下找
               		 // exclude:/node_modules/,             //排除。。。。
                },
            },
	}
}

8.elint配置验证js得语法

配置插件
npm i eslint eslint-loader -D

配置文件

// 模块加载
    module: {
        // loader 模块加载器
        rules: [
			 {
                test: /\.js$/,
                use: {
                    loader: "eslint-loader",
                    options: {
                        enforce: "pre", // 强制previous优先执行 post之后执行  保证在js转换之前执行
                    },
                },
            },
		]
}

创建 .eslintrc.json 内容可以网上有，官网上可以去下载demo，不过下载下来得文件前面少个.，然后放根目录下
https://eslint.bootcss.com/demo/

在这里插入图片描述


9，第三方插件得引入

方式三种：

1.import xxxx from ‘’

npm 下载插件， 最后会打包进我们得包里面，js体积会比较大

2.配置文件 使用webpack注入插件,可以使用cdn加速，也可Npm下载包 这里会将插件打包进来

webpack.config.js
顶部 引入webpack插件 用来注入我们得第三方插件
let webpack = require("webpack"); //注入插件
module.exports = {
	plugins: [
		new webpack.ProvidePlugin({
            //每个模块注入  可以使用cdn加速，也可Npm下载包 这里会将插件打包进来
            $: "jquery",
        }),
	]
}

3.推荐：externals 忽略第三方插件，不会打包到我们最后得包中，必须配合cdn使用

module.exports = {
	externals: {
        jquery: "$",
    },
}

这种方式为了防止cdn不稳定，可以做一个兼容，在静态文件夹得index.html中做个判断，下面以vue举例：如果cdn挂了，可以动态得添加一个script标签，地址是自己服务器上得资源（得提前在服务器上备份，或者可以自己公司整一个npm库）

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> 
     <script>
       //防止cnd不稳定
         if(typeof Vue == 'undefined'){
           document.write('<script src="http://www.u-breath.com/modules/_vue@2.6.10@vue/dist/vue.min.js"><\/script>')
         }
     </script>

10.图片得处理
3种图片方式

1.css种背景图片得方式，css-loader会直接帮你转成require()得形式

2.js种 new Image()

import mya from “./my.jpg”;
let img = new Image();
img.src = mya;
document.getElementById(“img”).append(img);

需要url-loader拉解析import 引入得图片

npm i url-loader -D
允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理

// 图片解析加载 匹配js中得
rules:
            {
                test: /\png|jpe?g|gif$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 1000 * 1024, //小于xxxk 解析成base64 大于正常产出图片
                    },
                },
            },

3.img在html中使用
img src="…/src/my.jpg"

loader:html-withimg-loader
npm i html-withimg-loader -D

rules:
// 图片解析加载 匹配html中得
            {
                test: /\.html$/,
                use: {
                    loader: "html-withimg-loader",
                },
            },

11.打包文件分类

css  之前使用插件MiniCssExtractPlugin 外链了css可以改下他得filename
plugins:[
	new MiniCssExtractPlugin({
            filename: "/css/main.css", //外链得css名
        }),
]
img  在url-loader里面可以指定文件夹 ，还能给图片加上绝对路径
{
   test: /\png|jpe?g|gif$/,
     use: {
         loader: "url-loader",
         options: {
             limit: 10 * 1024, //小于10k 解析成base64 大于正常产出图片
             outputPath: "/img/",
             // publicPath:"http://xxxxxxxxxxxxxxx"   图片加上绝对路径，比如说图片全部采用得是cdn
         },
     },
 },

效果

在这里插入图片描述


12.多入口配置
创建两个js：a.js b.js

配置文件:利用HtmlWebpackPlugin中得chunks属性输出加载对应得js

// 多入口
    entry: {
        home: "./src/a.js",
        other: "./src/b.js",
    },
    // 多出口
    output: {
        filename: "[name].js", //打包后得文件名  加上这个bundle[hash].js  产生一个哈希值
        path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
    },
    plugins:[
	// html 模板 pub 静态资源文件夹，打包后自动根据pub/index.html，生成indexxxxx.html在dist中
        new HtmlWebpackPlugin({
            template: "./pub/index.html",
            filename: "indexxxx.html",
            // 打包后得html 也压缩
            // minify: {
            //     removeAttributeQuotes: true, //删除html中得双引号
            //     collapseWhitespace: true, //折成一行
            // },
            chunks: ["home"],
            minify: false,
            hash: true, //哈希值
        }),
        // html 模板 pub 静态资源文件夹，打包后自动根据pub/index.html，生成indexxxxx.html在dist中
        new HtmlWebpackPlugin({
            template: "./pub/index.html",
            filename: "indexxxx1.html",
            // 打包后得html 也压缩
            // minify: {
            //     removeAttributeQuotes: true, //删除html中得双引号
            //     collapseWhitespace: true, //折成一行
            // },
            chunks: ["home", "other"],
            minify: false,
            hash: true, //哈希值
        }),
	]

13.devtool 配置报错提示，找到对应的位置
配置文件webpack.config.js

4种值
source-map //增加映射文件，帮助我们调试代码 出错会标出具体位置,包中会多出以.map结尾得文件 显示的是原始源代码
eval-source-map 也能帮助我们调试代码，集成到打包得js中 包裹代码
cheap-module-source-map 不会产生列，但是是一个单独得映射文件 产生后可以保留起来调试 显示的是转换后的代码
cheap-module-eval-source-map不会产生文件，集成在打包后的文件中，不会产生列

devtool: "cheap-module-eval-source-map",

在这里插入图片描述

14.继续学习中

原文地址：https://blog.csdn.net/qq_38935512/article/details/112517327

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