webpack入门使用

1.废话

作为前端菜鸟，刚开始接触webpack时，是因为vue，通过vue-cli拉下来的代码，里面webpack基本已经配置好了，需要我们自己配置的不多，一直想弄明白webpack是怎么用的，简单记录一下，模拟vue的目录结构，使用的webpack和webpack-dev-server版本也和vue中的一样，所以这两个安装时指定了版本。一般vue的目录结构是

webpack入门使用_第1张图片

2.webpack的使用

1）安装webpack

mkdir webpack-practice && cd webpack-practice // 创建并打开项目
npm init // 这时会生成一个package.json文件
npm install --save-dev [email protected] // --save-dev 开发依赖，这时会生成package-lock.js

2）创建页面及入口文件main.js

新建dist文件夹，并创建index.html文件，并在index.html中引入将要被webpack打包过来的bundle.js文件；新建src文件夹，并创建js入口文件main.js。现在的目录结构是

webpack入门使用_第2张图片





  
  
  
  Document

给页面加点背景试试

// src/main.js
document.body.style.background = 'pink';

现在index.html和main.js还是不相关的，用webpack将main.js打包到dist目录下

$ ./node_modules/.bin/webpack src/main.js dist/bundle.js
$ ./node_modules/.bin/webpack src/main.js dist/bundle.js
Hash: 9f53edbc27a012ab9184
Version: webpack 3.6.0
Time: 59ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.52 kB       0  [emitted]  main
   [0] ./src/main.js 50 bytes {0} [built]

这时src中就生成了一个bundle.js文件

webpack入门使用_第3张图片

用浏览器直接打开看看

webpack入门使用_第4张图片

发现页面已经变了，说明webpack成功将main.js打包到bundle.js中去了。

webpack配置文件

在根目录新建webpack.config.js，采用官方的配置

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

配置好了执行

$ ./node_modules/.bin/webpack
$ ./node_modules/.bin/webpack
Hash: 08e137312cf5d4feb095
Version: webpack 3.6.0
Time: 55ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.53 kB       0  [emitted]  main
   [0] ./src/main.js 55 bytes {0} [built]

执行这条命令会自动去寻找当前目录下的webpack.config.js文件。通过配置文件，比之前操作起来方便多了，我们可以有更快捷的操作。

npm操作方式

我们可以使用npm start命令来代替上述繁琐的操作，设置package.json文件中的scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 08e1373a2cf5d4feb095
Version: webpack 3.6.0
Time: 53ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.53 kB       0  [emitted]  main
   [0] ./src/main.js 55 bytes {0} [built]

执行这个命令会在node_modules/.bin中寻找webpack，无论是全局还是局部安装的webpack，你都不需要写前面那指明详细的路径了。

3）打包css文件

首先我们让页面的内容更丰富些，在src中新建page.js，并写些内容

// src/page.js
module.exports = function () {
  let content = document.createElement('div');
  content.textContent = 'In the begining God created the heavens and the earth';
  return content;
}

入口文件是main.js，所以要将page.js引入到main.js中

// src/main.js
import Page from './page';
document.body.style.background = 'pink';
document.querySelector('#app').appendChild(Page());

运行一下试试

$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: b4bcab267ae059f4e8b5
Version: webpack 3.6.0
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.21 kB       0  [emitted]  main
   [0] ./src/main.js 135 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]

然后看看页面

clipboard.png

接下来我们给文字加点样式，在src新建page.css文件，加些样式

/* src/page.css */
#app div{
  color: #333;
  font-size: 30px;
  font-family: fantasy;
}

同样在main.js中引入，同时我们将背景颜色改一下

// src/main.js
import Page from './page';
import './page.css';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

运行一下试试

$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 5d67b4883c9d13aec1e1
Version: webpack 3.6.0
Time: 65ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.77 kB       0  [emitted]  main
   [0] ./src/main.js 155 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 273 bytes {0} [built] [failed] [1 error]

ERROR in ./src/page.css
Module parse failed: /Users/liuzhiqin/Documents/study/webpack-practice/src/page.css Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| /* src/page.css */
| #app div{
|   color: '#fff';
|   font-size: 30px;
 @ ./src/main.js 3:0-19
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/liuzhiqin/.npm/_logs/2018-10-19T06_24_25_011Z-debug.log

咦，怎么到page.css那里报错了，报错信息写的很清楚，需要合适的loader去处理这种文件类型。loader是webpack中用来处理不同文件的，如样式、图片、JS等资源，最后打包输出。webpack处理css文件需要style-loader和css-loader。

安装style-loader和css-loader

$ npm install --save-dev style-loader css-loader
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
added 42 packages from 54 contributors in 5.966s

并在webpack.config.js中配置

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

运行一下

$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 0c5a8f5abb63caaabad1
Version: webpack 3.6.0
Time: 393ms
    Asset     Size  Chunks             Chunk Names
bundle.js  20.6 kB       0  [emitted]  main
   [0] ./src/main.js 158 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 1.07 kB {0} [built]
   [3] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
    + 3 hidden modules

看看页面效果

clipboard.png

4）打包scss文件

webpack处理scss文件和css类似。首先也是在src目录下新建page.scss文件，并在main.js中引入

// src/page.scss
#app{
  div{
    text-align: center;
    border: 1px solid red;
  }
}

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

运行一下肯定会报错

$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: e6d2ef92a954bef9d9f4
Version: webpack 3.6.0
Time: 412ms
    Asset     Size  Chunks             Chunk Names
bundle.js  21.2 kB       0  [emitted]  main
   [0] ./src/main.js 181 bytes {0} [built]
   [1] ./src/page.js 193 bytes {0} [built]
   [2] ./src/page.css 1.07 kB {0} [built]
   [3] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 263 bytes {0} [built] [failed] [1 error]
    + 3 hidden modules

ERROR in ./src/page.scss
Module parse failed: /Users/liuzhiqin/Documents/study/webpack-practice/src/page.scss Unexpected character '#' (2:0)
You may need an appropriate loader to handle this file type.
| // src/page.scss
| #app{
|   div{
|     text-align: center;
 @ ./src/main.js 4:0-21
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/liuzhiqin/.npm/_logs/2018-10-19T07_17_11_531Z-debug.log

处理scss文件需要安装sass-loader和node-sass

$ npm install --save-dev sass-loader node-sass

安装的那些开发依赖都可以在package.json中找到

  "devDependencies": {
    "css-loader": "^1.0.0",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0"
  }

修改webpack.config.js配置

...
  module: {
    rules: [
      ...
      {//处理scss
        test: /\.scss$/,
        use: ["style-loader","css-loader","sass-loader"]//简化写法
      }
    ]
  }
}

再次运行一下

$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: 96acf3f989cacc7756fa
Version: webpack 3.6.0
Time: 500ms
    Asset     Size  Chunks             Chunk Names
bundle.js  22.3 kB       0  [emitted]  main
   [2] ./src/main.js 181 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 222 bytes {0} [built]
    + 3 hidden modules

页面已经发生了变化

clipboard.png

5）打包图片资源

首先在src中新件夹image,用于存放原始图片，然后随便找张图片放进去。webpack处理图片需要安装url-loader和file-loader

npm isntall --save-dev url-loader file-loader

配置webpack.config.js,在module中加上处理图片的规则

// webpack.config.js
const path = require('path');
module.exports = {
 ...
  module: {
    rules: [
      ...
      {//处理图片
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use: ['url-loader?limit=8192&name=images/[name]-[hash:5].[ext]']//打包后放在images文件下，并加上哈希值命名
      }
    ]
  }
}

同时，在main.js中加引入图片

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = '#f7f7f7';
document.querySelector('#app').appendChild(Page());

let myImg = new Image();
myImg.src = require('./images/hand.jpg');
document.querySelector('#app').appendChild(myImg);
$ npm start

> [email protected] start /Users/liuzhiqin/Documents/study/webpack-practice
> webpack

Hash: a286e8bbed5798e46b43
Version: webpack 3.6.0
Time: 383ms
                Asset     Size  Chunks             Chunk Names
images/hand-a729a.jpg   106 kB          [emitted]
            bundle.js  22.6 kB       0  [emitted]  main
   [2] ./src/main.js 299 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 222 bytes {0} [built]
   [9] ./src/images/hand.jpg 67 bytes {0} [built]
    + 3 hidden modules

webpack入门使用_第5张图片

我们看到在dist中生成了一个新的文件夹images，打包后的图片也在里面，我们看看页面效果

webpack入门使用_第6张图片

6）webpack-dev-server的使用

一般我们都是项目放到服务器上的，这样我们就可以实现自动刷新页面，webpack也可以起服务的，这时需要安装webpack-dev-server。

$ npm install --save-dev [email protected]

安装成功后，我们需要对webpack进行配置，这时就可以放到服务器上运行了

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',//打包后输出的文件名
    path: path.resolve(__dirname, 'dist') //打包后文件存放的地方
  },
  ...
  devServer: {
    contentBase: './dist'//服务指向的根目录
  }
}

执行代码

$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 97287251caffe518e6c6
Version: webpack 3.6.0
Time: 976ms
                Asset    Size  Chunks                    Chunk Names
images/hand-a729a.jpg  106 kB          [emitted]
            bundle.js  348 kB       0  [emitted]  [big]  main
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
webpack: Compiled successfully.

在浏览器输入localhost:8080，中看看效果

webpack入门使用_第7张图片

这时我们将背景改变一下，让它变回粉色试试

// src/main.js
import Page from './page';
import './page.css';
import './page.scss';
document.body.style.background = 'pink';
document.querySelector('#app').appendChild(Page());

let myImg = new Image();
myImg.src = require('./images/hand.jpg');
document.querySelector('#app').appendChild(myImg);

webpack会自动打包，并且页面自动刷新，再也不用手动刷新了。

webpack入门使用_第8张图片

在开发阶段，一般都是在本地起个服务，执行npm run dev就能运行。为了效法vue项目的目录结构，在根目录新建文件夹build，并将webpack.config.js移到其中，并将其重命名为webpack.dev.conf.js。在package.json中加上

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  },

执行npm run dev试试

$ npm run dev

> [email protected] dev /Users/liuzhiqin/Documents/study/webpack-practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: 53ee487180346d1f2264
Version: webpack 3.6.0
Time: 1244ms
                Asset    Size  Chunks                    Chunk Names
images/hand-a729a.jpg  106 kB          [emitted]
            bundle.js  348 kB       0  [emitted]  [big]  main
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 298 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 97287251caffe518e6c6
Version: webpack 3.6.0
Time: 108ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  348 kB       0  [emitted]  [big]  main
 + 1 hidden asset
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
    + 95 hidden modules
webpack: Compiled successfully.

7）webpack插件

vue-cli拉下来的vue项目中，根目录有个index.html文件，这是个模板文件，用于生成dist文件下面的index.html文件，这就需要引入HtmlWebpackPlugin插件

安装HtmlWebpackPlugin

$ npm install --save-dev html-webpack-plugin
npm WARN [email protected] requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

+ [email protected]
added 38 packages from 57 contributors in 8.443s

在根目录新建一个index.html文件，里面的代码如下





  
  
  
  Document

再次执行npm run dev，页面同样了成功显示

$ npm run dev

> [email protected] dev /Users/liuzhiqin/Documents/study/webpack-practice
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
Hash: d6c1b4bbf4e88618a995
Version: webpack 3.6.0
Time: 1696ms
                Asset       Size  Chunks                    Chunk Names
images/hand-a729a.jpg     106 kB          [emitted]
            bundle.js     348 kB       0  [emitted]  [big]  main
           index.html  389 bytes          [emitted]
  [37] multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.js 40 bytes {0} [built]
  [38] (webpack)-dev-server/client?http://localhost:8080 7.23 kB {0} [built]
  [39] ./node_modules/url/url.js 23.3 kB {0} [built]
  [45] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [46] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [47] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [48] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
  [80] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [87] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [89] ./src/main.js 301 bytes {0} [built]
  [90] ./src/page.js 193 bytes {0} [built]
  [91] ./src/page.css 1.07 kB {0} [built]
  [94] ./src/page.scss 1.2 kB {0} [built]
  [96] ./src/images/hand.jpg 67 bytes {0} [built]
    + 82 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 539 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
webpack: Compiling...
Hash: 7fd780016bdbd41a7a19
Version: webpack 3.6.0
Time: 87ms
     Asset       Size  Chunks             Chunk Names
index.html  353 bytes          [emitted]
 + 2 hidden assets
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 96 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 502 bytes {1} [built]
        + 3 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: c3c1881cc01ac3fc0696
Version: webpack 3.6.0
Time: 84ms
     Asset       Size  Chunks             Chunk Names
index.html  349 bytes          [emitted]
 + 2 hidden assets
  [85] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
    + 96 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 498 bytes {0} [built]
        + 3 hidden modules
webpack: Compiled successfully.

在模板文件中，没有引入bundle.js文件，HtmlWebpackPlugin会自动添加。

webpack入门使用_第9张图片

其实，可以完全将dist文件夹删掉，服务依然能正常运行，这是因为webpack-dev-server会把打包好的数据存在内存中。现在目录结构是

webpack入门使用_第10张图片

这就是为什么在开发阶段时，只执行npm run dev来启动webpack-dev-server，那时并没有生成dist文件夹，可以正常开发，从内存中直接加载数据。部署时，在通过命令打包（一般是npm run build)生成dist，然后再讲将打包好的dist放到服务器上，再通过nginx等web服务启动。

部署打包

在build文件下，新建webpack.prod.conf.js，里面的配置和webpack.dev.conf.js很像，如下

// build/webpack.prod.conf.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/main.js',//入口文件
  output: {
    filename: 'bundle.js',//打包后输出的文件名
    path: path.resolve(__dirname, '../dist'),//打包后文件存放的地方
  },
  ...
  devServer: {
    contentBase: './dist',//服务指向的根目录
  },
  //webpack插件
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../index.html')
        })
    ]
}

并更新package.json，加上build命令，并将start设置为启动dev

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run dev",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js"
  },
...
}

执行打包命令

$ npm run build

> [email protected] build /Users/liuzhiqin/Documents/study/webpack-practice
> NODE_ENV=production webpack --progress --config build/webpack.prod.conf.js

Hash: 4dde899e11c579299335
Version: webpack 3.6.0
Time: 971ms
                Asset       Size  Chunks             Chunk Names
images/hand-a729a.jpg     106 kB          [emitted]
            bundle.js    22.6 kB       0  [emitted]  main
           index.html  349 bytes          [emitted]
   [2] ./src/main.js 301 bytes {0} [built]
   [3] ./src/page.js 193 bytes {0} [built]
   [4] ./src/page.css 1.07 kB {0} [built]
   [5] ./node_modules/css-loader!./src/page.css 252 bytes {0} [built]
   [7] ./src/page.scss 1.2 kB {0} [built]
   [8] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/page.scss 254 bytes {0} [built]
   [9] ./src/images/hand.jpg 67 bytes {0} [built]
    + 3 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.html 498 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module

这时我们的根目录就会生成一个dist文件

webpack入门使用_第11张图片

未完待续，菜鸟总结，希望能帮到其他新手，大神请忽略，勿喷~

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

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • 消息中间件有哪些常见类型 xmh-sxh-1314 java
    消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
    我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
  • 高级编程--XML+socket练习题 masa010 java开发语言
    1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • Python数据分析与可视化实战指南 William数据分析 pythonpython数据
    在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
  • C#中使用split分割字符串 互联网打工人no1 c#
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
  • Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言
    文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
  • Python教程：一文了解使用Python处理XPath 旦莫 Python进阶python开发语言
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • linux中sdl的使用教程,sdl使用入门 Melissa Corvinus linux中sdl的使用教程
    本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口，窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下：1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别：比如一个从左到右由红色渐变到蓝色的矩形，用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来；而纹理只是一
  • LLM 词汇表 落难Coder LLMsNLP大语言模型大模型llama人工智能
    Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数
  • 下载github patch到本地 小米人er 我的博客gitpatch
    以下是几种从GitHub上下载以.patch结尾的补丁文件的方法：通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件，浏览器会显示文件的内容，在页面的右上角通常会有一个“Raw”按钮，点击它可以获取原始文件内容。然后在浏览器中使用快捷键（如Ctrl+S或者Command+S）将原始文件保存到本地，选择保存的文件名并确保后缀为.p
  • 使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器） 编程经验分享 开发工具服务器sshlinux
    目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
  • 直返最高等级与直返APP：无需邀请码的返利新体验 古楼
    随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，
  • SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQLServer数据库sqlserver
    1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • 2020-04-12每天三百字之连接与替代 冷眼看潮
    不知道是不是好为人师，有时候还真想和别人分享一下我对某些现象的看法或者解释。人类社会不断发展进步的过程，就是不断连接与替代的过程。人类发现了火并应用火以后，告别了茹毛饮血的野兽般的原始生活（火烧、烹饪替代了生食）人类用石器代替了完全手工，工具的使用使人类进步一大步。类似这样的替代还有很多，随着科技的发展，有更多的原始的事物被替代，代之以更高效、更先进的技术。在近现代，汽车替代了马车，高速公路和铁路
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 探索OpenAI和LangChain的适配器集成：轻松切换模型提供商 nseejrukjhad langchaineasyui前端python
    #探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商
  • 使用Faiss进行高效相似度搜索 llzwxh888 faisspython
    在现代AI应用中，快速和高效的相似度搜索是至关重要的。Faiss（FacebookAISimilaritySearch）是一个专门用于快速相似度搜索和聚类的库，特别适用于高维向量。本文将介绍如何使用Faiss来进行相似度搜索，并结合Python代码演示其基本用法。什么是Faiss？Faiss是一个由FacebookAIResearch团队开发的开源库，主要用于高维向量的相似性搜索和聚类。Faiss
  • 使用LLaVa和Ollama实现多模态RAG示例 llzwxh888 python人工智能开发语言
    本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG（检索增强生成），通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先，您需要安装以下依赖包：!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p
  • python是什么意思中文-在python中%是什么意思 编程大乐趣
    Python中%有两种：1、数值运算：%代表取模，返回除法的余数。如：>>>7%212、%操作符（字符串格式化，stringformatting），说明如下：%[(name)][flags][width].[precision]typecode(name)为命名flags可以有+，-，''或0。+表示右对齐。-表示左对齐。''为一个空格，表示在正数的左侧填充一个空格，从而与负数对齐。0表示使用0填
  • 使用Apify加载Twitter消息以进行微调的完整指南 nseejrukjhad twittereasyui前端python
    #使用Apify加载Twitter消息以进行微调的完整指南##引言在自然语言处理领域，微调模型以适应特定任务是提升模型性能的常见方法。本文将介绍如何使用Apify从Twitter导出聊天信息，以便进一步进行微调。##主要内容###使用Apify导出推文首先，我们需要从Twitter导出推文。Apify可以帮助我们做到这一点。通过Apify的强大功能，我们可以批量抓取和导出数据，适用于各类应用场景。
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他