webpack4.X(入门到入土)

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

Learning webpack

安装webpack

npm init -y//建立默认手脚架
npm install webpack webpack-cli --save-dev

Demo

1.在根目录建立两个文件夹(src文件夹和dist文件夹)
src文件夹：用来存放javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
2.编写程序文件
(1)在dist文件下手动建立一个index.html文件(/dist/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div id="title"></div>
    <!-- bundle.js是webpack执行打包命令后生产的文件。 -->
    <script src="./main.js"></script>
</body>
</html>
(2)在src文件夹下建立entery.js的文件用于编写JavaScript代码，也是入口文件(src/index.js)
document.getElementById('title').innerHTML='Hello Webpack';
3.Webpack打包输出
终端（命令行）中输入
npx webpack
将会在./dist把编译结果输出为main.js (没有 webpack.config.js 的默认配置)
目录结构:
|-- ./dist                        // 最终使用代码
|-- ./node_modules                // 各个依赖开发包
|-- ./src                         // 源文件
|-- ./package.json                // 配置脚手架

入口与出口

1.在项目根目录下创建webpack.config.js(webpack配置文件)
//写入 webpack 配置文件
const path = require('path') 
module.exports={
    //入口文件的配置项(可以是单一入口，也可以是多入口)
    entry:{
       //里面的entery是可以随便写的
       main:'./src/index.js'
    },

    //出口文件的配置项(支持多出口配置)
    output:{
       //打包的文件名称
       filename: 'bundle.js',
       //打包的路径位置
       //path.resolve(__dirname,’./dist’)就是获取了项目的绝对路径。
       path: path.resolve(__dirname, './dist') 
    },

    //模块：例如解读CSS,图片如何转换，压缩
    module:{},

    //插件，用于生产模版和各项功能
    plugins:[],

    //配置webpack开发服务功能
    devServer:{}
}
终端（命令行）中输入
npx webpack
2.多入口、多出口配置
(1)src目录下新建index1.js(src/index1.js)
alert('welcome to jsfan.net')
(2)修改项目根目录下webpack.config.js为
//写入 webpack 配置文件
const path = require('path') 
module.exports={
    //入口文件的配置项(可以是单一入口，也可以是多入口)
    entry:{
       //里面的entery是可以随便写的
       main:'./src/index.js',
       //增加入口文件
       index1:'./src/index1.js'
    },

    //出口文件的配置项(支持多出口配置)
    output:{
    //多出口打包的文件名称(修改后)
    //[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
    filename:'[name].js',
       
    //打包的路径位置
       //path.resolve(__dirname,’./dist’)就是获取了项目的绝对路径。
       path: path.resolve(__dirname, './dist') 
    },

    //模块：例如解读CSS,图片如何转换，压缩
    module:{},

    //插件，用于生产模版和各项功能
    plugins:[],

    //配置webpack开发服务功能
    devServer:{}
}
(3)终端（命令行）中输入
npx webpack
(4)在dist文件中index.html中引入
<script src='./index1.js'></script>

热更新

1.安装 webpack-dev-server
npm install webpack-dev-server --save-dev
2.配置webpack.config.js中的devServer为
devServer:{
  //服务器的IP地址，可以使用IP也可以使用localhost 
  host:'localhost',
  //配置服务端口号
  port:'8080',
  //自动打开浏览器
  open:true,
  //热加载
  hot:true,
  //服务端压缩是否开启
  compress:true,
}
3.修改webpack.config.js
(1).引入webpack
const webpack=require('webpack');
(2).修改plugins
plugins:[
       //热更新插件
       new webpack.HotModuleReplacementPlugin()
],
(3).向output中添加publicPath
output:{
   publicPath:'/dist',//必须加publicPath
   filename:'[name].js',  
   path: path.resolve(__dirname, './dist') 
},
4.修改package.json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "server": "webpack-dev-server"
},
5.运行(终端中输入)
npm run server
注释:
运行出现Cannot find module 'webpack-cli/bin/config-yargs’时
npm install webpack-cli//(重新运行)
运行出现Cannot find module 'webpack’时
npm i webpack -D//(重新运行)

CSS文件打包

1.安装style-loader与css-loader
npm i style-loader css-loader -D
2.配置webpack.config.js中的module为
module:{
   rules:[
     {    //css使用
       test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
       use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
        'style-loader', 
        'css-loader'
       ],
       //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
       //query：为loaders提供额外的设置选项（可选）
     }
   ]
},
3.在src中新建css文件夹且创建index.css(src/css/index.css)
body{
background-color: red;
color: white;
}
4.在src中index.js内引用(src/index.js)
import './css/index.css'
5.运行
npm run server

打包HTML文件

1.安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
2.在webpack.config.js中引入
const htmlPlugin= require('html-webpack-plugin')
3.配置webpack.config.js中的plugins为
plugins:[
       //热更新插件
       new webpack.HotModuleReplacementPlugin(),
       //打包HTML插件
       new htmlPlugin({
        minify:{ //对html文件进行压缩
            removeAttributeQuotes:true //removeAttrubuteQuotes去掉属性的双引号
        },
        hash:true, //开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS
        template:'./src/index.html' //要打包的html模版路径和文件名称
        })
],
4.在src目录下新建index.html(src/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div id='title'></div>
</body>
</html>
5.删除dist目录且重新打包
npx webpack

CSS中的图片处理

1.安装file-loader与url-loader
npm install --save-dev file-loader url-loader
2.修改src目录下index.html(src/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <div id='tupian'></div>
    <div id='title'></div>
</body>
</html>
3.修改src->css目录下index.css(src/css/index.css)
body{
    background-color: red;
    color: white;
}
#tupian{
    /* 此处图片与文件路径自行创建 */
    background-image: url(../images/全局npm.png);
    width:500px;
    height:500px;
}
4.配置webpack.config.js中的module为
   rules:[
     {    //css使用
       test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
       use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
        'style-loader', 
        'css-loader'
       ],
       //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
       //query：为loaders提供额外的设置选项（可选）
     },
     {    //css中图片使用
        test:/\.(png|svg|jpg|gif)$/,
        use:[{
           loader:'url-loader',
           options:{
               //大于此大小则打包成图片
               limit:500000 //把小于500000B的文件打成Base64的格式，写入JS
           }
        }]
    },
   ]
5.打包且检验
npx webpack
npm run server

处理HTML中的图片

1.安装html-withimg-loader
npm install html-withimg-loader --save
2.配置webpack.config.js中的module为
module:{
   rules:[
     {    //css使用
       test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
       use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
        'style-loader', 
        'css-loader'
       ],
       //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
       //query：为loaders提供额外的设置选项（可选）

     },
     {    //css中图片使用
        test:/\.(png|svg|jpg|gif)$/,
        use:[{
           loader:'url-loader',
           options:{
               limit:500, //把小于500B的文件打成Base64的格式，写入JS 大于此大小则打包成图片
               outputPath:'images/', //输出的文件夹 大于此大小则打包成图片输出
              
               esModule:false //html-webpack-plugin与html-withimg-loader发生了冲突解决方法
              }
        }]
    },
    {   //将html与htm中的img打包出来
     test: /\.(htm|html)$/i,
      use:[ 'html-withimg-loader'] 
    },
   ]
},
注:file-loader升级到5.0了，所以需要在file-loader的options里使用一个配置:esModule:false(url-loader包含file-loader大多功能)
3.向src目录下的index.html中增加(图片自行添加)
<div><img src="images/孤独.png" alt=""></div>
4.打包及热更新
npx webpack
npm run server

Less文件的使用与打包

1.安装Less
npm install --save-dev less
2.在原有的基础上安装less-loader(原有基础:style-loader css-loader)
npm n install --save-dev less-loader
3.向webpack.config.js中的module增添
{   
     test:/\.less$/,
     use:[
          'style-loader',   
          'css-loader',
          'less-loader',   
          ]
},
4.编写black.less(/css/black.less)
@base :#000;
#gogo{
    width:300px;
    height:300px;
    background-color:@base;
}
5.引入到index.js文件中
import './css/black.less'
6.打包及热更新
npx webpack
npm run server

Sass文件的使用与打包

1.安装Sass
npm install --save-dev node-sass
2.在原有的基础上安装sass-loader(原有基础:style-loader css-loader)
npm install --save-dev sass-loader
3.向webpack.config.js中的module增添
{
    test: /\.scss$/,
    use:[
      'style-loader',   
      'css-loader',
      'sass-loader',   
    ]
}
4.编写Sass.scss(/css/Sass.scss)
$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}
5.引入到index.js文件中
import './css/Sass.scss'
6.打包及热更新
npx webpack
npm run server

css代码分离

1.安装mini-css-extract-plugin
npm install mini-css-extract-plugin -D
2.向webpack.config.js中增添
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2.向webpack.config.js中的module增添
{ 
       test: /\.css$/i,
       use: [
           {
              loader: MiniCssExtractPlugin.loader,
              options: { //解决打包后背景图丢失问题
                 publicPath: '../',
               },
            },
            'css-loader',
       ],
},
3.向webpack.config.js中的plugins增添
new MiniCssExtractPlugin({ //css分离
           filename: 'style/[name].css',// 分离后的文件名
           chunkFilename: '[id].css',
           ignoreOrder: false//启用可删除有关顺序冲突的警告 
}),
4.打包及热更新
npx webpack
npm run server

自动处理css前缀兼容不同浏览器

1.安装postcss-loader 和autoprefixer(自动添加前缀的插件)
npm install --save-dev postcss-loader autoprefixer
2.在项目根目录，建立postcss.config.js文件且写入
module.exports = {
	plugins:[
    require('autoprefixer')({
        browsers : ['last 100 versions']//必须设置支持的浏览器才会自动添加添加浏览器兼容
        //> 1%       //  浏览器的市场占有 得超过 百分之1
        //last 2 versions   // 浏览器的最后俩个版本
    })
 ]
}
3.修改webpack.config.js中的module为
     { 
        test: /\.css$/i,
        use: [
           {
              loader: MiniCssExtractPlugin.loader,
              options: { //解决打包后背景图丢失问题
                 publicPath: '../',
               },
            },
            'css-loader',
            'postcss-loader'
        ],
      },
4.打包及热更新
npx webpack
npm run server
5.打包效果展示
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
       -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
            box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);

消除未使用的CSS

1.安装purify-css和PurifyCSS-webpack
npm  i -D purifycss-webpack purify-css
2.在webpack.config.js中引入
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
3.向webpack.config.js中的plugins增添
new PurifyCSSPlugin({              
    // 首先保证找路径不是异步的,所以这里用同步的方法
    // path.join()也是path里面的方法,主要用来合并路径的
    // 'src/*.html' 表示扫描每个html的css
    paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
4.打包及热更新
npx webpack
npm run server

集成babel支持

1.安装babel-loader、babel-core、babel-preset-env
npm install -D babel-loader babel-core babel-preset-env
注:babel-loader安装最新版本后博主出现打包错误
package.json中更改其版本为"^7.0.0"后恢复正常
2.在项目根目录下创建.babelrc文件且输入
{
"presets": ["env"]
}
3.向webpack.config.js中的module增添
{ 
    test: /\.js$/,
    exclude: /node_modules/, 
    loader: "babel-loader"
}
4.向js文件中增添es6语法
5.打包及热更新
npx webpack
npm run server

开启打包调试

向webpack.config.js中entry的同级目录增添
//开发者模式 可调错
devtool:'source-map',
//开启调试功能,上线之前需将此行注释
1.source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
2.cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
3.eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
4.cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。
上述选项由上到下打包速度越来越快，同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

引入第三方库

1.安装JQuery
npm install --save jquery
2.向index.js文件中增添
import $ from 'jquery';
3.当前文件中使用JQ

watch自动打包

运行watch
npx webpack --watch

--END--

原文地址：https://blog.csdn.net/Youngster_yj/article/details/111960395

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