一、loader

1.1-Less样式处理

less-loader 把less语法转换成css

npm install less less-loader --save-dev

完整代码

src/css/index.less

html{
    
    
    body{
    
    
        background: blue;

        .ele{
    
    
            background-color: #fff;
        }
    }
    
}

src/index.js

import css from  "./css/index.less";

let ele = `<div class=${
      
      css.ele}>css module</div>`;

document.write(ele);

webpack.config.js



const path = require("path");

module.exports = {
    
    
    entry:"./src/index.js",
    mode:"development",
    output:{
    
    
        clean: true, ------- 相当于插件 clean-webpack-plugin
        path:path.resolve(__dirname,"./dist"),
        filename:"[name].js"
    },
    module:{
    
    
        rules:[
            {
    
    
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            css预处理，并且开启css模块化
            {
    
    
                test: /\.less$/i,
                use: [
                    "style-loader",
                    {
    
    
                        loader:"css-loader",
                        options: {
    
    
                            modules: true,  启用/禁用CSS模块及其配置,默认不开启
                        },
                        
                    },
                    "less-loader"],
              },
        ]
    }
}

dist/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./main.js"></script>
  
</body>

</html>

页面效果

在这里插入图片描述

{
    
    
	test: /\.less$/i,
	use: ["style-loader","css-loader","less-loader"],
},


loader有顺序，从右到左，从下到上


- loader 处理理webpack不不⽀支持的格式⽂文件，模块
- 一个loader只处理理⼀件事情
- loader有执⾏行行顺序

1.2-postcss 样式自动添加前缀

前端兼容性自查工具

1.在webpack中需要处理css必须先安装如下两个loader  
npm install --save-dev css-loader style-loader

2. 要处理less和添加浏览器前缀需要下载如下插件和loader
npm install less less-loader --save-dev

postcss-loader autoprefixer postcss 处理浏览器兼容,添加浏览器前缀
npm install --save-dev  postcss-loader autoprefixer postcss


3.如下配置
** postcss-loader  放在 css-loader  之前


4.新建postcss.config.js

完整代码

webpack.config.js


const path = require("path");

module.exports = {
    
    
    entry:"./src/index.js",
    mode:"development",
    output:{
    
    
        // clean: true,
        path:path.resolve(__dirname,"./dist"),
        filename:"[name].js"
    },
    module:{
    
    
        rules:[
            {
    
    
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
    
    
                test: /\.less$/i,
                use: [
                    style-loader  把CSS插入到DOM中。
                    "style-loader",
                    
                    css-loader 会处理 import / require() , @import / url 引入的内容。
                    {
    
    
                        loader:"css-loader",
                        options: {
    
    
                            modules: true,//启用/禁用CSS模块及其配置,默认不开启
                        },
                        
                    },
                    
                    postcss-loader 添加浏览器前缀
                    {
    
    
                        loader: "postcss-loader",
                    },
                    
                    less-loader 将 Less 编译为 CSS 
                    "less-loader"
                	],
              },
        ]
    }
}

postcss.config.js

const autoprefixer = require("autoprefixer");


module.exports = {
    
    
    plugins: [
        // postcss 使用 autoprefixer 添加前缀的标准

        /**
         * last 2 versions  兼容最近的两个版本
         * ios 14 13
         * 
         * 
         * >1%
         * 全球浏览器的市场份额  大于1%的浏览器
         */
    
        autoprefixer({
    
    
            overrideBrowserslist: ["last 2 versions", ">1%"],
        })

    ],
}

在这里插入图片描述

1.3-file-loader 处理理静态资源模块

原理：是把打包入口中识别出的资源模块，移动到输出目录，并且返回一个地址名称
场景：就是当我们需要模块，仅仅是从源代码挪移到打包目录，就可以使用file-loader来处理，txt,，svg , csv , excel , 图片资源等等

npm install file-loader --save-dev

案例：

webpack.config.js

module: {
    
    
	rules: [
		{
    
    
			test: /\.(png|jpe?g|gif)$/i,
			loader: 'file-loader',
			options: {
    
    
				name:"[name]_[hash:6].[ext]",
				outputPath:"images/"
			},
		
		},
	]
}

src/index.js

import pic  from "./images/tu.jpg";

// 图片、txt、word等资源文件
var img = new Image();
//图片路径 pic
img.src = pic;

var root = document.getElementById("root");
root.append(img);

dist/index.html

<div id="root"></div>

<script src="./main.js"></script>

在这里插入图片描述

页面效果

在这里插入图片描述

1.4-file-loader 处理第三方字体

1.5-url-loader 将文件转换为 base64 URI

url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于 指定的限制时，可以返回一个 DataURL。

npm install url-loader --save-dev

module: {
    
    
	rules: [
		{
    
    
			test: /\.(png|jpe?g|gif)$/i,
			loader: 'url-loader', file-loader  替换为 url-loader
			options: {
    
    
				name:"[name]_[hash:6].[ext]",
				outputPath:"images/",
				

			 	推荐使用 url-loader   因为 url-loader 支持 limit
                推荐小体积的图片资源转成 base64   
                图标库 iconfont  适合
                logo  不适合  因为转成base64，字符串长度太长，增加js的体积
                低于指定的限制时，可以返回一个 DataURL。
                limit: 210 * 1024,   单位是字节 1024 = 1kb

			},
		
		},
	]
}

在这里插入图片描述

二、plugins

2.1-HtmlWebpackPlugin 生成html文件

该插件将为您生成一个HTML5文件

npm install --save-dev html-webpack-plugin

2.1.1-在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>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

2.1.2-删除dist文件夹

2.1.3-执行构建

会生成一个包含以下内容的dist/index.html

2.1.4-查看结果

在这里插入图片描述

完整代码
webpack.config.js

module.exports = {
    
    
    ......
    plugins: [new HtmlWebpackPlugin(
        {
    
    
            //选择html模板
            template: './src/index.html',
            filename:"index.html"
        }
    )],
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script defer src="main.js"></script></head>
<body>
    <div id="root"></div>
</body>
</html>

配置

* title 
* filename
* template
* inject
* favicon
* minify  
* hash
* cache
* showErrors
* chunks
* chunksSortMode
* excludeChunks

配置中的title
webpack.config.js

module.exports = {
    
    
    ......
    plugins: [    
        new htmlWebpackPlugin({
    
          
            title: "My App",      
            filename: "app.html",      
            template: "./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>Document</title> -->
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

页面效果
在这里插入图片描述

2.2-mini-css-extract-plugin CSS样式抽离

把所有样式包括css、less都打包到一个css文件 common.css中，然后再 link 进页面。

在这里插入图片描述

npm install --save-dev clean-webpack-plugin

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

{
    
      
	test: /\.css$/,  
	use: [MiniCssExtractPlugin.loader, "css-loader"] 
}


new MiniCssExtractPlugin({
    
       
	//filename: "[name][chunkhash:8].css" 
	filename: "css/[name].css" 
});

npx webpack

在这里插入图片描述

三、sourceMap

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。

在dev模式中，默认开启，关闭的话可以在设置为mode:“production”

devtool的介绍

eval：速度最快，使用eval包裹模块代码
source-map：产生.map文件
cheap：较快，不包含列信息
Moudle：第三方模块，包含loader的sourcemap
inline：将.map作为DataURI嵌入，不生成单独的.map文件

配置推荐：

devtool:"cheap-module-eval-source-map",// 开发环境配置


//线上不不推荐开启 
devtool:"cheap-module-source-map",   // 线上⽣生成配置

mode:"development"

在这里插入图片描述

mode:"production"

在这里插入图片描述

定位的报错是构建之后的bundle文件，不是源文件，不能帮助快速定位错误
那么打包完成之后我们开发的时候如何调试代码呢？
我们可以通过配置devtool生成map，来使调试变得更简单。
map其实就是源文件和打包后生成文件的一种映射。

 mode: "production",
devtool:"source-map",

在这里插入图片描述

 mode: "production",
devtool:"inline-source-map",

在这里插入图片描述

.map文件没有了
打开 bundle文件main.js，可以看到base64，这一串就是source map，

四、webpack-dev-server 开发服务器

为什么要用webpack-dev-server

在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,
每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。
webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。

在这里插入图片描述

webpack 5 与 webpack-dev-server 3兼容性问题

报错：Error: Cannot find module ‘webpack-cli/bin/config-yargs’
webpack-cli 4.5.0 和 webpack-dev-server 3.11.2 不兼容

解决方法

卸载webpack-cli4.5.0，webpack-cli的版本降为3.3.12

npm uninstall webpack-cli
npm i  [email protected]  -D

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

2.webpack.config.js
devServer: {
    
    
	contentBase: path.join(__dirname, 'dist'),
	compress: true,
	port: 8080,
},
plugins: [    
    new htmlWebpackPlugin({
    
          
        title: "My App",      
        filename: "index.html",      
        template: "./src/index.html"    
    })  
], 

app.html  改为  index.html


3.
npm  run  server

在这里插入图片描述

修改代码直接看到效果，浏览器端帮我们刷新，提升开发效率
在这里插入图片描述

五、完整代码

webpack.config.js

const path = require("path");

// const htmlWebpackPlugin  = require('html-webpack-plugin');

const htmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
    
    
    entry: "./src/index.js",
    mode: "development",
    // mode: "production",
    output: {
    
    
        clean: true,
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].js"
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            // 
            //

            /**
             * 1.在webpack中需要处理css必须先安装如下两个loader  
             * npm install --save-dev css-loader style-loader
             * 
             * 2. 要处理less和添加浏览器前缀需要下载如下插件和loader
             * npm install less less-loader --save-dev
             * 
             * postcss-loader autoprefixer postcss 处理浏览器兼容,添加浏览器前缀
             * npm install --save-dev  postcss-loader autoprefixer postcss
             * 
             * 
             * 3.如下配置
             * postcss-loader  放在 css-loader  之前
             * 
             * 
             * 4.新建postcss.config.js
             * 
             */
            {
    
    
                test: /\.less$/i,
                use: [
                    "style-loader",
                    {
    
    
                        loader: "css-loader",
                        options: {
    
    
                            modules: true,//启用/禁用CSS模块及其配置,默认不开启
                        },

                    },
                    {
    
    
                        loader: "postcss-loader",
                    },
                    "less-loader"],
            },
            {
    
    
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'url-loader', // file-loader  替换为 url-loader
                options: {
    
    
                    name:"[name]_[hash:6].[ext]",
                    outputPath:"images/",
                    //推荐使用 url-loader   因为 url-loader 支持 limit
                    //推荐小体积的图片资源转成 base64   
                    //图标库 iconfont  适合
                    //logo  不适合  因为转成base64，字符串长度太长，增加js的体积
                    //低于指定的限制时，可以返回一个 DataURL。
                    limit: 210 * 1024, //单位是字节 1024 = 1kb
                   
                },

            },
        ]
    },
    // devtool:"source-map",
    devServer: {
    
    
        /**
         * contentBase:告诉服务器内容的来源。仅在需要提供静态文件时才进行配置
         * 
         * 当开启webpack-dev-server的时候，服务器的目录指向 dist
         * 
         * 可以是相对路径
         * contentBase:"./dist"
         * 
         * contentBase: path.join(__dirname, 'public'),
         * 
         * 
         * contentBase: [
         *      path.join(__dirname, 'public'),
         *      path.join(__dirname, 'assets'),
         * ]
         */
        // contentBase: path.join(__dirname, 'dist'),
        contentBase:"./dist",
        /**
         * open ：告诉dev-server在服务器启动后打开true浏览器。
         * 
         * open: true,  打开默认浏览器
         * 
         * open: 'Google Chrome',
         * 
         */
        open:true,
        compress: true,
        //port 指定端口号
        port: 8080,
    }, 
    plugins: [    
        new htmlWebpackPlugin({
    
          
            title: "My App",      
            filename: "index.html",      
            template: "./src/index.html"    
        })  
    ],
   
}

postcss.config.js

const autoprefixer = require("autoprefixer");


module.exports = {
    
    
    plugins: [
        // postcss 使用 autoprefixer 添加前缀的标准

        /**
         * last 2 versions  兼容最近的两个版本
         * ios 14 13
         * 
         * 
         * >1%
         * 全球浏览器的市场份额  大于1%的浏览器
         */
    
        autoprefixer({
    
    
            overrideBrowserslist: ["last 2 versions", ">1%"],
        })

    ],
}

src/css/index.css

body{
    
    
    background:red;
}

src/css/index.less

html{
    
    
    body{
    
    
        background: blue;

        .ele{
    
    
            display: flex;//css3的属性   https://caniuse.com/  使用caniuse检测
            background-color: #fff;
        }
    }

}

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>Document</title> -->
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

src/index.js

 import "./css/index.css";

//------------ less-------------------



import css from  "./css/index.less";




let ele = `<div class=${
      
      css.ele}>css module</div>`;

 document.write(ele);


//----------------img-----------------------------------



import pic  from "./images/tu.jpg";

// 图片、txt、word等资源文件
var img = new Image();
//图片路径 pic
img.src = pic;

var root = document.getElementById("root");
root.append(img);


//---------------sourceMap---------------------------------------


//故意写错
console.log("css")

【 web高级 02webpack 】webpack02

一、loader

1.1-Less样式处理

src/css/index.less

src/index.js

webpack.config.js

dist/index.html

页面效果

1.2-postcss 样式自动添加前缀

webpack.config.js

postcss.config.js

1.3-file-loader 处理理静态资源模块

webpack.config.js

src/index.js

dist/index.html

1.4-file-loader 处理第三方字体

1.5-url-loader 将文件转换为 base64 URI

二、plugins

2.1-HtmlWebpackPlugin 生成html文件

2.1.1-在src下创建index.html ，模板

2.1.2-删除dist文件夹

2.1.3-执行构建

2.1.4-查看结果

2.2-mini-css-extract-plugin CSS样式抽离

三、sourceMap

四、webpack-dev-server 开发服务器

为什么要用webpack-dev-server

webpack 5 与 webpack-dev-server 3兼容性问题

五、完整代码

猜你喜欢

【 web高级 02webpack 】webpack02

一、loader

1.1-Less样式处理

src/css/index.less

src/index.js

webpack.config.js

dist/index.html

页面效果

1.2-postcss 样式自动添加前缀

webpack.config.js

postcss.config.js

1.3-file-loader 处理理静态资源模块

webpack.config.js

src/index.js

dist/index.html

1.4-file-loader 处理第三方字体

1.5-url-loader 将文件转换为 base64 URI

二、plugins

2.1-HtmlWebpackPlugin 生成html文件

2.1.1-在src下创建index.html ，模板

2.1.2-删除dist文件夹

2.1.3-执行构建

2.1.4-查看结果

2.2-mini-css-extract-plugin CSS样式抽离

三 、sourceMap

四、webpack-dev-server 开发服务器

为什么要用webpack-dev-server

webpack 5 与 webpack-dev-server 3兼容性问题

五、完整代码

猜你喜欢

三、sourceMap