欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?webpack打包原理解析(全網(wǎng)最新最全)

 更新時間：2023年02月09日 10:03:42   作者：哪?吒  
webpack是讓我們可以進(jìn)行模塊化開發(fā)，并且會幫助我們處理模塊間的依賴關(guān)系，這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點(diǎn)長，希望大家耐心閱讀

一、前端模塊化

webpack是讓我們可以進(jìn)行模塊化開發(fā)，并且會幫助我們處理模塊間的依賴關(guān)系。

并且不僅僅是JavaScript文件，還有CSS、圖片、json文件等等，在webpack中都可以被當(dāng)做模塊來使用。

二、打包

webpack中的各種資源模塊進(jìn)行打包合并成一個或多個包（Bundle）。

在打包的過程中，還可以對資源進(jìn)行處理，比如壓縮圖片，將scss轉(zhuǎn)成css，將ES6語法轉(zhuǎn)成ES5語法，將TypeScript轉(zhuǎn)成JavaScript等等操作。

和gulp的有什么區(qū)別？

  • gulp叫做前端自動化任務(wù)管理工具；
  • gulp會定義一系列的task，處理各種事務(wù)（ES6、ts轉(zhuǎn)化、圖片壓縮、scss轉(zhuǎn)成css）
  • 通過gulp依次執(zhí)行這些task，并且讓整個流程自動化；
const gulp = require('gulp')
const babel = require('gulp-babel')
 
gulp.task('js',() => 
    gulp.src('src/*.js')
        .pipe(babel({
            prests:['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

什么時候使用gulp呢？

  • 如果工程模塊依賴比較簡單，甚至沒有用到模塊化的概念；
  • 只需要進(jìn)行簡單的合并、壓縮；

總而言之，webpack是功能更加強(qiáng)大的gulp。

三、安裝webpack

1、安裝node.js

打開官網(wǎng)下載鏈接:Download | Node.js 我這里下載的是node-v6.9.2-x64.msi,如下圖：

 2、安裝webpack

npm install webpack@3.6.0 -g

四、webpack打包js

1、普通打包方式

webpack .\src\main.js .\dist\bundle.js

打包之后，就可以在index.html中引入bundle.js了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<script src="./dist/bundle.js"></script>
</body>
</html>

2、webpack.config.js配置和package.json配置

（1）webpack.config.js

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

（2）package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

3、理解開發(fā)時依賴和運(yùn)行時依賴

本地安裝webpack

npm install webpack@3.6.0 --save-dev

 在終端中敲的命令，運(yùn)用的都是全局的webpack。

五、loader

1、loader簡介

loader 用于對模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

你可以使用 loader 告訴 webpack 加載 CSS 文件，或者將 TypeScript 轉(zhuǎn)為 JavaScript。為此，首先安裝相對應(yīng)的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后指示 webpack 對每個 .css 使用 css-loader，以及對所有 .ts 文件使用 ts-loader：

webpack.config.js

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

2、使用 loader

在你的應(yīng)用程序中，有三種使用 loader 的方式：

  • 配置（推薦）：在 webpack.config.js 文件中指定 loader。
  • 內(nèi)聯(lián)：在每個 import 語句中顯式指定 loader。
  • CLI：在 shell 命令中指定它們。

3、配置[Configuration]允許你在 webpack 配置中指定多個 loader

這是展示 loader 的一種簡明方式，并且有助于使代碼變得簡潔。同時讓你對各個 loader 有個全局概覽：

六、less與url-loader

1、安裝less

npm install --save-dev less-loader less

 2、less示例

將 css-loader、style-loader 和 less-loader 鏈?zhǔn)秸{(diào)用，可以把所有樣式立即應(yīng)用于 DOM。

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

 3、安裝url-loader

npm install --save-dev url-loader

4、url-loader用法

url-loader 功能類似于 file-loader，但是在文件大小（單位 byte）低于指定的限制時，可以返回一個 DataURL。

import img from './image.png'

 webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

當(dāng)圖片大小大于limit中限制時，需要使用file-loader進(jìn)行圖片加載，再轉(zhuǎn)為base64字符串。 

5、file-loader

1、安裝file-loader

npm install --save-dev file-loader

七、加載圖片代碼實(shí)例

1、項(xiàng)目目錄

 2、index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<script src="./dist/bundle.js"></script>
</body>
</html>

3、main.js

// 1.使用commonjs的模塊化規(guī)范
const {add, mul} = require('./js/mathUtils.js')
 
console.log(add(20, 30));
console.log(mul(20, 30));
 
// 2.使用ES6的模塊化的規(guī)范
import {name, age, height} from "./js/info";
 
console.log(name);
console.log(age);
console.log(height);
 
// 3.依賴css文件
require('./css/normal.css')
 
// 4.依賴less文件
require('./css/special.less')
document.writeln('<h2>你好啊,哪吒!</h2>')

4、info.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

5、mathUtils.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

6、normal.css

body {
  /*background-color: red;*/
  background: url("../img/timg.jpg");
}

7、special.less

@fontSize: 50px;
@fontColor: orange;
 
body {
  font-size: @fontSize;
  color: @fontColor;
}

八、ES6語法處理

webpack打包的js文件，并沒有將ES6語法轉(zhuǎn)譯成ES5的語法，因此可能對某些瀏覽器不兼容，此時需要使用babel。

1、安裝babel-loader

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

2、在 webpack 配置對象中，需要添加 babel-loader 到 module 的 loaders 列表中，

像下面這樣：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

bundle.js從ES6語法編譯為ES5語法了。

九、webpack使用vue的配置過程

1、安裝vue的三種方式 直接下載應(yīng)用CDN引入npm安裝

2、npm安裝vue

因?yàn)椴皇沁\(yùn)行時依賴，以后部署的時候也要使用vue，所以不需要-vue

npm install vue --save

runtime-only -> 代碼中，不可以有任何的template

runtime-compiler -> 代碼中可以有template，因?yàn)橛衏ompiler可以用于編譯template

使用如下配置解決找不到template的報(bào)錯問題：

resolve: {
? ? // alias: 別名
? ? extensions: ['.js', '.css', '.vue'],
? ? alias: {
? ? ? 'vue$': 'vue/dist/vue.esm.js'
? ? }
? }

十、el和template區(qū)別

1、正常運(yùn)行之后，我們要考慮一個問題

如果我們將data中的數(shù)據(jù)顯示在界面中，就必須修改index.html；

如果我們后面自定義了組件，也必須修改index.html來使用組件；

但是html模板在之后的開發(fā)中，并不希望手動的頻繁的修改index.html；

2、解決方法 --> 定義template屬性

在前面的Vue實(shí)例中，我們定義了el屬性，用于和index.html中的#app進(jìn)行綁定，讓Vue實(shí)例之后可以管理它其中的內(nèi)容；

這里我們可以將div元素中的{{message}}內(nèi)容刪掉，只保留一個基本的id為div的元素；

但是如果我們依然希望在其中顯示{{message}}的內(nèi)容，我們可以定義一個template屬性；

如果el和template同時存在時，template會替換掉el的內(nèi)容：

new Vue({
    el:'#app',
    template:`
        <div>
            <h2>{{message}}</h2>
            <button @click="btnClick">按鈕</button>
            <h2>{{name}}</h2>
        </div>
    `,
    data:{
        message:'hello webpack',
        name:'哪吒'
    },
    methods:{
        btnClick(){
            console.log('i am csdn 哪吒！')
        }
    }
})

簡化：

const App = {
     template:`
        <div>
            <h2>{{message}}</h2>
            <button @click="btnClick">按鈕</button>
            <h2>{{name}}</h2>
        </div>
    `,
    data:{   
        return {
            message:'hello webpack',
            name:'哪吒'
        }
    },
    methods:{
        btnClick(){
            console.log('i am csdn 哪吒！')
        }
    }
}
 
new Vue({
    el:'#app',
    template:`<App/>`,
    components:{
        App
    }
})

再次簡化：

app.js

export default {
  template:  `
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按鈕</button>
    <h2>{{name}}</h2>
  </div>
  `,
  data() {
    return {
      message: 'Hello Webpack',
      name: 'coderwhy'
    }
  },
  methods: {
    btnClick() {
 
    }
  }
}

main.js

// 5.使用Vue進(jìn)行開發(fā)
import Vue from 'vue'
import App from './vue/app'
 
new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

終極優(yōu)化

App.vue

<template>
  <div>
    <h2 class="title">{{message}}</h2>
    <button @click="btnClick">按鈕</button>
    <h2>{{name}}</h2>
    <Cpn/>
  </div>
</template>
 
<script>
  import Cpn from './Cpn'
 
  export default {
    name: "App",
    components: {
      Cpn
    },
    data() {
      return {
        message: 'Hello Webpack',
        name: 'coderwhy'
      }
    },
    methods: {
      btnClick() {
 
      }
    }
  }
</script>
 
<style scoped>
  .title {
    color: green;
  }
</style>

main.js

// 5.使用Vue進(jìn)行開發(fā)
import Vue from 'vue'
import App from './vue/App.vue'
 
new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

但是，此時程序無法加載vue文件，需要npm安裝loader

npm install vue-loader vue-template-compiler --save-dev

webpack.config.js中配置：

...
{
    test: /\.vue$/,
    use: ['vue-loader']
}
...

十一、認(rèn)識plugin

1、plugin是什么？

plugin是插件的意思，通常適用于對某個現(xiàn)有的框架的擴(kuò)展。

webpack中的插件，就是對webpack現(xiàn)有功能的各種擴(kuò)展，比如打包優(yōu)化，文件壓縮等。

2、loader和plugin的區(qū)別？

loader主要用于轉(zhuǎn)換某些類型的模板，它是一個轉(zhuǎn)換器。

plugin是插件，它是對webpack本身的擴(kuò)展，是一個擴(kuò)展器。

3、plugin的使用過程 通過npm安裝需要使用的plugins在webpack.config.js中的plugins中配置插件

4、代碼實(shí)例

plugins: [
    new webpack.BannerPlugin('最終版權(quán)歸aaa所有'),
],

5、htmlWebpackPlugin

（1）、作用

自動生成一個index.html文件將打包的js文件，自動通過script標(biāo)簽插入到body中

（2）安裝htmlWebpackPlugin

npm install htnl-webpack-plugin --save-dev

（3）使用插件

修改webpack.config.js文件中plugins部分的內(nèi)容

plugins: [
    new webpack.BannerPlugin('最終版權(quán)歸aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
],

6、第三方插件uglifyjs-webpack-plugin

指定版本1.1.1，和CLI2保持一致。

（1）安裝

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

（2）修改配置文件

plugins: [
    new webpack.BannerPlugin('最終版權(quán)歸aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()
],

7、webpack-dev-server搭建本地服務(wù)器

（1）webpack-dev-server簡介

webpack提供了一個可選的本地開發(fā)服務(wù)器，這個本地服務(wù)器基于node.js搭建，內(nèi)部使用express框架，可以實(shí)現(xiàn)我們想要的讓瀏覽器自動刷新顯示我們修改后的結(jié)果。

（2）安裝

npm install --save-dev webpack-dev-server@2.9.1

（3）屬性介紹

devserver作為webpack的一個選項(xiàng)，選項(xiàng)本身可以設(shè)置如下屬性：

contentBase：為哪一個文件夾提供本地服務(wù)，默認(rèn)是根文件夾，我們這里要填寫./distport：端口號inline：頁面實(shí)時刷新historyApiFallback：在SPA頁面中，依賴HTML5的history模式

（4）配置實(shí)例

  devServer: {
    contentBase: './dist',
    inline: true
  }

8、webpack配置文件的分離

（1）安裝插件

npm install webpack-merge --save-dev

（2）分離代碼實(shí)例

webpack-config.js

const path = require('path')
 
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只負(fù)責(zé)將css文件進(jìn)行加載
        // style-loader負(fù)責(zé)將樣式添加到DOM中
        // 使用多個loader時, 是從右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 當(dāng)加載的圖片, 小于limit時, 會將圖片編譯成base64字符串形式.
              // 當(dāng)加載的圖片, 大于limit時, 需要使用file-loader模塊進(jìn)行加載.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 別名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

build/base.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
 
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只負(fù)責(zé)將css文件進(jìn)行加載
        // style-loader負(fù)責(zé)將樣式添加到DOM中
        // 使用多個loader時, 是從右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader", // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader", // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 當(dāng)加載的圖片, 小于limit時, 會將圖片編譯成base64字符串形式.
              // 當(dāng)加載的圖片, 大于limit時, 需要使用file-loader模塊進(jìn)行加載.
              limit: 13000,
              name: 'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // alias: 別名
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最終版權(quán)歸aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

build/dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
 
module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

build/prod.config.js  

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
 
module.exports = webpackMerge(baseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

更改package.json

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

到此這篇關(guān)于vue webpack打包原理的文章就介紹到這了,更多相關(guān)vue webpack打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論