SpaceCat
SpaceCat

Webpack使用入门

这里介绍webpack的基本使用。

1、打包js后引用

1.1 文件准备

在一个单独的目录中新建配置文件00_webpackhello/package.json：

{  
  "name": "00_webpackhello",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "build": "webpack --mode development"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "devDependencies":{  
    "webpack": "^5.74.0",  
    "webpack-cli": "^4.10.0"  
  }  
}

在同目录下新建配置文件00_webpackhello/webpack.config.js：

const path = require('path');  
  
module.exports = {  
    entry: './src/main.js',  
    output: {  
        path: path.resolve(__dirname, 'dist'),  
        filename: 'bundle.js',  
    },  
};

在相同目录下新建src目录，并创建待打包的js文件。
00_webpackhello/src/compute.js：

var testNum1 = 6, testNum2 = 3;  
function add(a, b) {  
    return a + b;  
}  
function minus(a, b) {  
    return a - b;  
}  
function multiply(a, b) {  
    return a * b;  
}  
function divide(a, b) {  
    return a / b;  
}  
//这里导出一个默认变量  
export {  
    add,  
    minus,  
    multiply,  
    divide  
}

00_webpackhello/src/main.js：

import * as tmp from './compute.js'  
var num1 = 10, num2 = 2;  
alert("testNum1: " + ", testNum2: " +  " " + tmp.add(num1, num2) + " " + tmp.minus(num1, num2)+ " " + tmp.multiply(num1, num2)+ " " + tmp.divide(num1, num2));

添加gitignore配置文件00_webpackhello/.gitignore：

dist/  
node_modules/

新建一个测试html文件，用于引用打包后的js文件，看是否有效。
00_webpackhello/index.html：

1.2 环境安装

在当前目录下执行如下npm install命令，npm会自动根据package.json配置文件中的依赖进行安装。

$ npm install

up to date in 692ms
$

执行完成后，这个目录下会生成一个package-lock.json配置文件，我们一般不用管它。同时，前面在package.json中配置的依赖，应该会自动安装到00_webpackhello/node_modules目录下。

1.3 打包

在当前目录下执行打包命令：

$ npm run build

> [email protected] build
> webpack --mode development

asset bundle.js 4.79 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 513 bytes
  ./src/main.js 219 bytes [built] [code generated]
  ./src/compute.js 294 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 132 ms
$

在当前目录会新生成一个dist目录，其中包含打包生成的文件00_webpackhello/dist/bundle.js。打包之后的完整目录结构如下图。

image.png

1.4 测试

这时候，如果在浏览器中打开前面创建的index.html，可以看到js已经生效。如下图。


image.png

2、打包为js依赖库

2.1 直接作为依赖库引用报错

前面的例子中，如果在index.html中直接写一个script标签，调用add函数，如下：

会报错add没有定义。这是因为在javascript的模块化语法里面，在每一个模块文件中定义的函数和变量都是局部变量，所以，在模块范围之外没法引用。

2.2 依赖库打包配置说明

webpack支持将js文件打包为依赖库，供其他人调用。通过library的配置可以支持指定库的名称， libraryTarget指定库打包出来的规范。
其中，可选的值有“var、assign、this、window、global、commonjs、commonjs2、commonjs”。
不同取值的打包行为说明如下：

// var config  
{  
    output: {  
        library: 'myLib',  
            filename: 'var.js',  
            libraryTarget: 'var'  
    }  
}  
// output  
var myLib = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// assign config  
{  
    output: {  
        library: 'myLib',  
            filename: 'assign.js',  
            libraryTarget: 'assign'  
    }  
}  
// output： 少了个 var  
myLib = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// this config{  
{  
    output: {  
        library: 'myLib',  
            filename: 'this.js',  
            libraryTarget: 'this'  
    }  
}  
// output  
this["myLib"] = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// window config  
{  
    output: {  
        library: 'myLib',  
            filename: 'window.js',  
            libraryTarget: 'window'  
    }  
}  
// output  
window["myLib"] = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// global config  
{  
    output: {  
        library: 'myLib',  
            filename: 'global.js',  
            libraryTarget: 'global'  
    }  
}  
  
// output：注意 target=node 的时候才是 global，默认 target=web下global 为 window  
window["myLib"] = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// commonjs config  
{  
    output: {  
        library: 'myLib',  
            filename: 'commonjs.js',  
            libraryTarget: 'commonjs'  
    }  
}  
// output  
exports["myLib"] = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// amd config  
{  
    output: {  
        library: 'myLib',  
            filename: 'amd.js',  
            libraryTarget: 'amd'  
    }  
}  
// output  
define('myLib', [], function () {  
    return (function (modules) { })({  
        './src/index.js': function (module, exports) { }  
    });  
});  
// ===============================================  
  
// umd config  
{  
    output: {  
        library: 'myLib',  
            filename: 'umd.js',  
            libraryTarget: 'umd'  
    }  
}  
// output  
(function webpackUniversalModuleDefinition(root, factory) {  
    if (typeof exports === 'object' && typeof module === 'object')  
        module.exports = factory();  
    else if (typeof define === 'function' && define.amd) define([], factory);  
    else if (typeof exports === 'object') exports['myLib'] = factory();  
    else root['myLib'] = factory();  
})(window, function () {  
    return (function (modules) { })({  
        './src/index.js': function (module, exports) { }  
    });  
});  
// ===============================================  
  
// commonjs2 config  
{  
    output: {  
        library: 'myLib',  
            filename: 'commonjs2.js',  
            libraryTarget: 'commonjs2'  
    }  
}  
//output  
module.exports = (function(modules) {})({  
    './src/index.js': function(module, exports) { }  
});  
// ===============================================  
  
// umd2 config  
{  
    output: {  
        library: 'myLib',  
            filename: 'umd2.js',  
            libraryTarget: 'umd2'  
    }  
}  
// output  
(function webpackUniversalModuleDefinition(root, factory) {  
    if (typeof exports === 'object' && typeof module === 'object')  
        module.exports = factory();  
    else if (typeof define === 'function' && define.amd) define([], factory);  
    else if (typeof exports === 'object') exports['myLib'] = factory();  
    else root['myLib'] = factory();  
})(window, function () {  
    return (function (modules) { })({  
        './src/index.js': function (module, exports) {  
        }  
    });  
});  
// ===============================================  
  
// commonjs-module config  
{  
    output: {  
        library: 'myLib',  
            filename: 'commonjs-module.js',  
            libraryTarget: 'commonjs-module'  
    }  
}  
// output  
module.exports = (function (modules) { })({  
    './src/index.js': function (module, exports) { }  
});  
// ===============================================  
  
// jsonp config  
{  
    output: {  
        library: 'myLib',  
            filename: 'jsonp.js',  
            libraryTarget: 'jsonp'  
    }  
}  
// output  
myLib((function (modules) { })({  
    './src/index.js': function (module, exports) { }  
}));  
// ===============================================

简单说明见下图：


image.png

2.3 依赖库打包示例

这里将前面的例子中的代码，打包为可以在script标签中引用的依赖库。
首先，修改打包的配置文件00_webpackhello/webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        //指定打包后的库通过全局变量的方式暴露
        libraryTarget: "var",
        //指定打包后的库名
        library: "MATH"
    },
};

然后，修改测试文件00_webpackhello/index.html，在script标签中调用前面的依赖函数，如下。

这样，在00_webpackhello目录下执行npm run build打包命令之后，在浏览器中打开测试文件00_webpackhello/index.html，可以看到能够正常被调用。第一个alert弹出之后，第二个alert，也可以正常弹出，如下图：

image.png

实际上，这样打包之后，也可以在单独的js文件中引用。这里新建一个00_webpackhello/callTest.js文件：

alert(MATH.multiply(22,2));

在测试文件00_webpackhello/index.html中，引用这个文件，如下：

在浏览器中打开上述测试文件之后，可以看到三个alert框，说明在单独的js文件中，也可以被调用到。

3、打包css

3.1 将css打包到js中

3.1.1 预处理器css-loader和style-loader简介

这里需要用到两个预处理器css-loader和style-loader。css-loader的作用是解析css文件，包括解析@import等css自身语法，它会将解析后的css文件以字符串的形式打包到js文件中(但此时，css样式并不会生效，因为需要把css文件插入到html中才会生效)。style-loader的作用就是把js中的样式代码插入到html中。它的原理很简单，就是通过动态生成style标签并将其插入到html文件的head标签中。

3.1.2 打包css到js示例

在一个新的目录01_webpackhello中新建如下文件。
npm配置文件，01_webpackhello/package.json：

{  
  "name": "00_webpackhello",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "build": "webpack --mode development"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "devDependencies": {  
    "css-loader": "^6.7.2",  
    "style-loader": "^3.3.1"  
  }  
}

webpack配置文件，01_webpackhello/webpack.config.js：

const path = require('path');  
  
module.exports = {  
    entry: './src/main.js',  
    output: {  
        path: path.resolve(__dirname, 'dist'),  
        filename: 'bundle.js'  
    },  
    module: {  
        rules: [  
            {  
                test: /\.css$/i,  
                //执行顺序从右向左，将css-loader处理后的结果传给style-loader  
                use: ['style-loader', 'css-loader'],  
            },  
        ],  
    },  
};

添加gitignore配置文件01_webpackhello/.gitignore：

dist/  
node_modules/

新建javascript代码，01_webpackhello/src/main.js：

import './css/all.css'; // 使用 ESM 方式引入  
const name = 'Paopao';  
alert('Hello ' + name);  
console.log('Hello ' + name);

新建css代码，01_webpackhello/src/css/all.css：

.text-primary {
    color: rgb(37, 37, 177);
}

新建一个测试打包效果的html文件，01_webpackhello/index.html：



    
    



Hello World

在该目录下执行npm install命令，npm会自动根据package.json配置文件中的依赖进行安装。
然后，执行npm run build命令，就可以执行打包操作。打包后的目录结构如下。

image.png

这时候，在浏览器中打开前面新建的01_webpackhello/index.html，可以看到css已经生效，弹出alert框之后，字体显示为蓝色，如下。

image.png

3.2 处理css引入的图片

3.2.1 file-loader简介

file-loader是一个文件资源预处理器，作用是：处理文件导入语句(比如js的import ... from ...和css中的url())并替换成它的访问地址，同时把文件输出到相应的位置。

3.2.2 处理css引入图片的打包示例

首先，修改npm配置文件01_webpackhello/package.json：

{
  "name": "00_webpackhello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.0.2",
    "style-loader": "^2.0.0",
    "file-loader": "^5.1.0"
  }
}

注意：如果style-loader、css-loader、file-loader这几个的版本号不配套，会导致一个图片打包后生成两个，其中一个还不能用的情况。
修改webpack配置文件，增加file-loader的处理，01_webpackhello/webpack.config.js：

const path = require('path');

module.exports = {
   entry: './src/main.js',
   output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
   },
   module: {
       rules: [
           {
               test: /\.css$/I,
               //执行顺序从右向左，将css-loader处理后的结果传给style-loader
               use: ['style-loader', 'css-loader'],
           },
           {
               test: /\.png$/,
               use: "file-loader"
           }
       ],
   },
};

修改样式表文件，01_webpackhello/src/css/all.css：

.text-primary {  
    color: rgb(37, 37, 177);  
}  
body{  
    background: url("img/cat.png") no-repeat;  
}

同时，新增一个图片文件img/cat.png。
在该目录下执行npm install命令，npm会自动根据package.json配置文件中的依赖进行安装。
然后，执行npm run build命令，就可以执行打包操作。打包后的目录结构如下。

image.png

这时，在浏览器中打开前面新建的01_webpackhello/index.html，可以看到css已经生效，弹出alert框之后，字体显示为蓝色，并且有背景图片，如下。

image.png

3.2.3 指定css引入图片打包后的文件名和存放路径

前面的例子中，可以看出，css引用的图片在打包之后，文件名成了一个hash串。如果我们想要指定图片文件名和存放位置，只需要修改webpack配置文件，给file-loader传入options。如下。
01_webpackhello/webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/I,
                //执行顺序从右向左，将css-loader处理后的结果传给style-loader
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.png$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: 'img/[name].[ext]'
                    }
                }
            }
        ],
    },
};

执行npm run build命令，就可以执行打包操作。打包后的目录结构如下。

image.png

，在浏览器中打开前面新建的01_webpackhello/index.html，可以看到css已经生效，弹出alert框之后，字体显示为蓝色，并且有背景图片，如下。

image.png

3.3 将css打包成到单独的文件

还是前面的例子，代码不变，修改打包的相关配置。
首先，修改npm配置文件01_webpackhello/package.json，增加mini-css-extract-plugin依赖：

{  
  "name": "00_webpackhello",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "build": "webpack --mode development"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "devDependencies": {  
    "css-loader": "^5.0.2",  
    "style-loader": "^2.0.0",  
    "file-loader": "^5.1.0",  
    "mini-css-extract-plugin": "^2.6.1"  
  }  
}

修改打包的配置文件01_webpackhello/webpack.config.js，这里将css打包到dist/css/img/main.css：

const path = require('path');  
//step 1: 加载mini-css-extract-plugin  
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  
  
module.exports = {  
    //这样，可以配置多个entry，同时打包多个文件  
    entry: {  
      main: './src/main.js',  
    },  
    output: {  
        path: path.resolve(__dirname, 'dist'),  
        filename: 'bundle.js'  
    },  
    module: {  
        rules: [  
            {  
                test: /\.css$/i,  
                //执行顺序从右向左，将css-loader处理后的结果传给MiniCssExtractPlugin.loader  
                use: [MiniCssExtractPlugin.loader, 'css-loader'],  
            },  
            {  
                test: /\.png$/,  
                use: {  
                    loader: "file-loader",  
                    options: {  
                        name: 'css/img/[name].[ext]'  
                    }  
                }  
            }  
        ],  
    },  
  
    //step 2: 创建mini-css-extract-plugin实例  
    plugins: [  
        new MiniCssExtractPlugin({  
            //指定css输出的文件  
            filename: 'css/[name].css'  
        })  
    ]  
};

修改测试的html文件01_webpackhello/index.html，引用前面打包的css：

  
  
      
          
  
  

Hello World

在该目录下执行npm install命令，npm会自动根据package.json配置文件中的依赖进行新增安装mini-css-extract-plugin。
然后，执行npm run build命令，就可以执行打包操作。

image.png

，在浏览器中打开前面新建的01_webpackhello/index.html，可以看到css已经生效，弹出alert框之后，字体显示为蓝色，并且有背景图片，如下。

image.png

3.4 使用asset modules处理图片文件

asset modules是webpack5新加入的功能，称为资源模块，通过它，无需使用额外的预处理器，就可以将图片和字体等文件进行解析和处理。
在上面例子的基础上，修改webpack打包的配置文件01_webpackhello/webpack.config.js，通过asset modules处理图片资源：

const path = require('path');  
//step 1: 加载mini-css-extract-plugin  
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  
  
module.exports = {  
    //这样，可以配置多个entry，同时打包多个文件  
    entry: {  
      main: './src/main.js',  
    },  
    output: {  
        path: path.resolve(__dirname, 'dist'),  
        filename: 'bundle.js'  
    },  
    module: {  
        rules: [  
            {  
                test: /\.css$/i,  
                //执行顺序从右向左，将css-loader处理后的结果传给MiniCssExtractPlugin.loader  
                use: [MiniCssExtractPlugin.loader, 'css-loader'],  
            },  
            {  
                test: /\.png$/,  
                type: 'asset/resource',  
                generator: {  
                    filename: 'css/img/[name].[ext]'  
                }  
            }  
        ],  
    },  
  
    //step 2: 创建mini-css-extract-plugin实例  
    plugins: [  
        new MiniCssExtractPlugin({  
            //指定css输出的文件  
            filename: 'css/[name].css'  
        })  
    ]  
};

执行npm run build命令，就可以执行打包操作。

image.png

，在浏览器中打开前面新建的01_webpackhello/index.html，可以看到css已经生效，弹出alert框之后，字体显示为蓝色，并且有背景图片，如下。

image.png

参考资料

  • 【深入理解webpack】library,libraryTarget,externals的区别及作用

你可能感兴趣的:(Webpack使用入门)

  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • Webpack五大核心概念 前路茫茫——何处无香 webpackwebpack
    一、Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。二、Output输出（Output）指示Webpack打包后的资源bundles输出到那里去，以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件（Webpack自身子理解JavaScript）四、Plugins插件（Plugins）可以用于执行范围更广
  • webpack - 五大核心概念和基本配置（打包一个简单HTML页面） 怕冷的火焰（~杰） nodejs和webpackwebpacknode.js
    //五大核心概念1.entry（入口）指示Webpack从哪个文件开始打包2.output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等3.loader（加载器）webpack本身只能处理js，json等资源，其他资源如图片需要借助loader，webpack才能解析4.plugin（插件）扩展Webpack的功能5.mode（模式）主要有两种模式：开发模式（development
  • Webpack和Vite的区别 南辞w 前端面试篇webpack前端node.js
    什么是webpack？webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。Webpack的打包构建流程Webpack会遍历你应用程序中的所有文件，并启动一个开发服务器，
  • CRACO 快速使用 小秀_heo React及其周边生态前端javascript
    GettingStarted|CRACOcraco是专门由于cra配置的重写，扩展配置cra（webpack）。安装依赖npmi-D@craco/craco根目录下创建craco.config.js和配置configure:my-app├──node_modules+├──craco.config.js└──package.jsoncraco.config.jsmodule.exports={de
  • 周末写点东西都是很困难的 焦糖大瓜子
    趁周末，也没有出去玩，回了趟家。看了一下VueCLI，也看了看阮大神写的webpack教程。webpack是一直想详细掌握的工具，需要系统学。学习一门技术，系统学习之后，那些重要和概念、设计的逻辑，也未必完全掌握，掌握的东西，也未必烂熟于心。终归要用于实际项目，反反复复，也就是常说的那个三境界：1.昨夜西风凋碧树，独上高楼，望断天涯路2.衣带渐宽终不悔,为伊消得人憔悴3.众里寻他千百度，蓦然回首，
  • ASM系列五 利用TreeApi 解析生成Class lijingyao8206 ASM字节码动态生成ClassNodeTreeAPI
       前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。          在介绍前，先要知道一点， Tree工程的接口基本可以完
  • 链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
    我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 需求简介： 经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
  • 为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
        在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧，     JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
  • 最近的情况 麦田的设计者 生活感悟计划软考想
          今天是2015年4月27号      整理一下最近的思绪以及要完成的任务             1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
  • PHP去掉字符串中最后一个字符的方法 IT独行者 PHP字符串
    今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
  • hadoop在linux上单机安装过程 _wy_ linuxhadoop
    1、安装JDK     jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行：    export JAVA_HOME=/usr/java/jdk1.7.0_25  
  • JAVA进阶----分布式事务的一种简单处理方法 无量 多系统交互分布式事务
    每个方法都是原子操作： 提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
  • 安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉 矮蛋蛋 hadoop互联网
    　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广
  • myelipse设置 alafqq IP
      在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 注释模板导入步骤  安装方法： 打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
  • java数组 百合不是茶 java数组
    java数组的   声明  创建  初始化；   java支持C语言      数组中的每个数都有唯一的一个下标 一维数组的定义 声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
  • javascript读取表单数据 bijian1013 JavaScript
    利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
  • 探索JUnit4扩展：使用Theory bijian1013 javaJUnitTheory
    理论机制（Theory） 一.为什么要引用理论机制（Theory）         当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点：     &nb
  • [Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
    什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
  • 【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
    问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！   //consumers、config、brokers、cont
  • java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
          　OOM异常的四种类型： 　　　 　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。     　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
  • java-实现链表反转-递归和非递归实现 bylijinnan java
    20120422更新： 对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。 解法： 将链表拆成两部分： a.0-&
  • Netty源码学习-DelimiterBasedFrameDecoder bylijinnan javanetty
    看DelimiterBasedFrameDecoder的API，有举例： 接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
  • linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
    Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论 查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
  • Spring获取SessionFactory ctrain sessionFactory
    String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
  • Hive几种导出数据方式 daizj hive数据导出
    Hive几种导出数据方式   1.拷贝文件   如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path   2.导出到本地文件系统   --不能使用insert into local directory来导出数据，会报错 --只能使用
  • 编程之美 dcj3sjt126com 编程PHP重构
    我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解   header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
  • Android保存用户名和密码 dcj3sjt126com android
    转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通 的txt文本存储 2、通过properties属性文件进行存
  • Oracle 复习笔记之同义词 eksliang Oracle 同义词Oracle synonym
    转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词       同义词是现有模式对象的一个别名。       概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
  • Ajax案例 gongmeitao Ajaxjsp
    数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
  • ASP.NET中Request.RawUrl、Request.Url的区别 hvt .netWebC#asp.nethovertree
      如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
  • SVG 教程 （七）SVG 实例，SVG 参考手册 天梯梦 svg
    SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。   SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩
  • 事务管理 luyulong javaspring编程事务
    事物管理 spring事物的好处 为不同的事物API提供了一致的编程模型 支持声明式事务管理 提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED 
  • 基础数据结构和算法十一：Red-black binary search tree sunwinner AlgorithmRed-black
      The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
  • centos同步时间 stunizhengjia linux集群同步时间
    做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
  • ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
    ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：      《NFC：Arduino、Andro
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他