国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用webpack打包你的Project

2bdenny / 1813人閱讀

摘要：說明代碼拆分有兩種組織模塊依賴的方式，同步和異步。在優化了依賴樹后，每一個異步區塊都作為一個文件被打包。甚至在加載依賴的時候，允許使用動態表達式。快速運行使用異步和多級緩存提高運行效率，這使得能夠以令人難以置信的速度快速增量編譯。

webpack 說明

代碼拆分：Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的塊。在優化了依賴樹后，每一個異步區塊都作為一個文件被打包。

Loader：Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉換器可以將各種類型的資源轉換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。

智能解析：Webpack 有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時候，允許使用動態表達式 require("./templates/" + name + ".jade")。

插件系統：Webpack 還有一個功能豐富的插件系統。大多數內容功能都是基于這個插件系統運行的，還可以開發和使用開源的 Webpack 插件，來滿足各式各樣的需求。

快速運行：Webpack 使用異步 I/O 和多級緩存提高運行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

安裝

Global: npm install webpack -g

編譯

執行 webpack ，編譯入口文件 entry.js 并打包到 bundle.js， webpack entry.js bundle.js

編譯配置文件 webpack.config.js，去配置 entry.js 文件和 bundle.js 文件路徑

var webpack = require("webpack")

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  }
}
Library

初始化項目 npm init生成 package.js

安裝jquery依賴 npm install --save-dev

Loader

安裝loader npm instal css-loader style-loader -save-dev

修改配置文件模塊 module

安裝Babel 包， Babel 是編寫下一代 JavaScript 的編譯器。這個包允許使用 Babel 和 webpack 轉換 JavaScript 文件

babel-loader配置

安裝命令 npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-0 --save-dev

在 webpack.config.js 里配置 babel

排除匹配文件夾可提高執行速度，多個文件夾寫法 exclude: /(node_modules|bower_components)/,

babel: {
    presets: ["es2015", "stage-0"],
    plugins: ["transform-runtime"]
}

//或者放在 .babelrc文件中
{
    presets: ["es2015", "stage-0"],
    plugins: ["transform-runtime"]
}
var webpack = require("webpack");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module:{
    loaders: [
        {
            test: /.css$/,
            loader: "style-loader!css-loader"
        },
        {
          test: /.js$/,
          loader: "babel-loader",
          exclude:/node_modules/,
          query: {
            presets: ["es2015", "stage-0"],
            plugins: ["transform-runtime"]
          }
        }
    ]
  }
}
結合vue進行組件化開發

安裝 vue 組件 npm install vue vue-loader vue-html-loader vue-style-loader --save-dev

在 webpack.config.js 中引入 vue-loader

需要實時編譯模板，而非使用自帶的 runtime-only，需要引入如下配置

var webpack = require("webpack");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module:{
    loaders: [
        {
            test: /.css$/,
            loader: "style-loader!css-loader"
        },
        {
          test: /.js$/,
          loader: "babel-loader",
          exclude:/node_modules/,
          query: {
            presets: ["es2015", "stage-0"],
            plugins: ["transform-runtime"]
          }
        },
        {
          test: /.vue$/,
          loader: "vue-loader"
        }
    ]
  },
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js" // "vue/dist/vue.common.js" for webpack 1
    }
  }
}
命令

webpack --display-modules

webpack --display-modules --display-reasons

webpack -d devtools

webpack -p 執行優化文件壓縮

webpack -w 后臺監控代碼修改自動執行 webpack

webpack-dev-server

全局安裝 npm install webpack-dev-server -g

執行 webpack-dev-server --inline --hot

配置文件和插件

區分線上和線下的變量 debug = process.env.NODE_ENV !== "production";

修改配置文件如下

生成 json 文件 webpack -- profile --json > demo.js，使用 webpack-analyse上傳你的json文件進行分析，或者推薦使用另外一種比較不錯的插件 webpack-visualizer

//是否生成sourcemap
//線上引用插件相關 https://github.com/webpack/docs/wiki/list-of-plugins
{
    debug = process.env.NODE_ENV !== "production
    "devtools": debug ? "sourcemap" : null,
    "plugins": debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UgifyJsPlugin({mangle: false, sourcemap: false}),
    ]
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83267.html

相關文章

  • 讓webpack2兼容IE8以下代碼

    摘要：可用編譯低版本代碼水有多深不得而知啟動新技術提供測試框架進行單元測試，代碼覆蓋率報告，可與和快速對接。頁面的其他資源文件，通過引入單元測試項目啟動環境配置為了把保證項目正常運行，請自行更新相關環境。 項目地址：https://github.com/sayll/ie-webpack-start ie-webpack-start showImg(https://segmentfault....

    StonePanda 評論0 收藏0

  • webpack的教程

    摘要：有時候覺得一個工具的學習成本還是很大的，所以唯一的感覺就是隨隨便便放棄一個工具是多么的難。指定執行的方法命令。這時候我們再看一下目錄會多出來一個目錄說明你的處女終于破了。 嘮嘮嗑 ?前幾天在學習webpack時,踩過很多坑，也聽過webapck是多么的嗶嗶嗶嗶~~， 本人學習的工具有很多,比如sass的初級工具compass,自動化工具gulp,grunt,一起其他雜七雜八的工具。有時...

    Zhuxy 評論0 收藏0

  • Webpack vs Rollup

    摘要：年月份的時候，將的構建工具換成了。的特點代碼分割有兩種組織模塊依賴的方式，同步和異步。而目前在中大型項目中使用得非常廣泛。更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區 本文由作者余伯賢授權網易云社區發布。 2017年4月份的時候，Facebook將React的構建工具換成了Rollup。很多人就有疑問了，Webpack不也是Facebook團隊開發的嗎，為什么不使用...

    Null 評論0 收藏0

  • 2018年第33周-javeer對nodejs體會

    摘要：流程源處理源代碼，例如過濾任何值。工藝類從編譯后處理生成的文件，例如對類進行字節碼增強。整合后的測試執行集成測試后執行所需的操作。校驗運行任何檢查以驗證包裝是否有效并符合質量標準。 nodejs和es6 nodejs的語法和es6不一樣，如模塊系統，一個是CommonJS的require、一個是es6的import，寫模塊也不一樣。 nodejs的npm 我來理解，nodejs類似與j...

    xiongzenghui 評論0 收藏0

  • Vue 筆記三：Vue2.0與1.0的區別

    摘要：升級的區別與的斷層式升級不同，延續了自己的風格。在命名方式和上有一些區別，掌握它們是你升級整個項目的關鍵。以下內容都是來源于個人項目的一些經驗之談，并非系統性的闡述。總目錄前端經驗收集器轉載自個人建了前端學習群，旨在一起學習前端。 升級的區別 與angular的斷層式升級不同，vue延續了自己的風格。在命名方式和API上有一些區別，掌握它們是你升級整個項目的關鍵。以下內容都是來源于個人...

    Big_fat_cat 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<