Web前端框架基础知识-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帮我们完成打包

css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
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文件。

在webpack.config.js 中引入插件
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
在plugins模块中使用插件
plugins: [ new MiniCssExtractPlugin() ],
或通过参数 filename重新命名提职的css文件名
new MiniCssExtractPlugin({ filename:’./css/demo.css’ })
在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内容

引入插件
const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’);
使用插件
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');

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

相关推荐