使用webpack打包你的Project

2bdenny 發(fā)布于2019-08-20 16:56 / 1855人閱讀

摘要：說(shuō)明代碼拆分有兩種組織模塊依賴的方式，同步和異步。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。甚至在加載依賴的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式?？焖龠\(yùn)行使用異步和多級(jí)緩存提高運(yùn)行效率，這使得能夠以令人難以置信的速度快速增量編譯。

webpack 說(shuō)明

代碼拆分：Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。

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

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

插件系統(tǒng)：Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開發(fā)和使用開源的 Webpack 插件，來(lái)滿足各式各樣的需求。

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

安裝

Global: npm install webpack -g

編譯

執(zhí)行 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

初始化項(xiàng)目 npm init生成 package.js

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

Loader

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

修改配置文件模塊 module

安裝Babel 包， Babel 是編寫下一代 JavaScript 的編譯器。這個(gè)包允許使用 Babel 和 webpack 轉(zhuǎn)換 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

排除匹配文件夾可提高執(zhí)行速度，多個(gè)文件夾寫法 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"]
          }
        }
    ]
  }
}

結(jié)合vue進(jìn)行組件化開發(fā)

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

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

需要實(shí)時(shí)編譯模板，而非使用自帶的 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 執(zhí)行優(yōu)化文件壓縮

webpack -w 后臺(tái)監(jiān)控代碼修改自動(dòng)執(zhí)行 webpack

webpack-dev-server

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

執(zhí)行 webpack-dev-server --inline --hot

配置文件和插件

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

修改配置文件如下

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

//是否生成sourcemap
//線上引用插件相關(guān) 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}),
    ]
}

云服務(wù)器 GPU云服務(wù)器 Webpack打包分塊 webpack使用 webpack 使用公用cdn 使用簽名文件打包程序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83267.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

2bdenny

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的高?？蒲许?xiàng)目管理系統(tǒng)

閱讀 2482·2021-11-25 09:43
Java零基礎(chǔ)入門筆記｜原來(lái)學(xué)Java可以這么簡(jiǎn)單

閱讀 1309·2021-11-24 09:39
馬斯克公開支持上班“摸魚”，允許員工坐班聽音樂，還可外放

閱讀 825·2021-11-23 09:51
DediPath宣布已將業(yè)務(wù)擴(kuò)展到亞特蘭大，夏季促銷仍有效，美國(guó)便宜服務(wù)器$39/月起

閱讀 2450·2021-09-07 10:18
revenueserver：荷蘭抗投訴vps，不限流量，$7.59/月，1Gbps帶寬，2G內(nèi)存/1

閱讀 1971·2021-09-01 11:39
我的前端編碼習(xí)慣 —— css篇

閱讀 2837·2019-08-30 15:52
css3

閱讀 2648·2019-08-30 14:21
前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

閱讀 2916·2019-08-29 16:57

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用webpack打包你的Project

相關(guān)文章

**讓webpack2兼容IE8以下代碼**

webpack的教程

Webpack vs Rollup

2018年第33周-javeer對(duì)nodejs體會(huì)

Vue 筆記三：Vue2.0與1.0的區(qū)別

發(fā)表評(píng)論

0條評(píng)論

2bdenny

男|高級(jí)講師

TA的文章

基于javaweb+jsp的高?？蒲许?xiàng)目管理系統(tǒng)

Java零基礎(chǔ)入門筆記｜原來(lái)學(xué)Java可以這么簡(jiǎn)單

馬斯克公開支持上班“摸魚”，允許員工坐班聽音樂，還可外放

DediPath宣布已將業(yè)務(wù)擴(kuò)展到亞特蘭大，夏季促銷仍有效，美國(guó)便宜服務(wù)器$39/月起

revenueserver：荷蘭抗投訴vps，不限流量，$7.59/月，1Gbps帶寬，2G內(nèi)存/1

我的前端編碼習(xí)慣 —— css篇

css3

前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用webpack打包你的Project

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！