webpack 一站到底二

2021-09-14 04:32:57 字數 2828 閱讀 2660

續webpack一——一站到底

(7)webpack-dev-server 啟動乙個本地服務

不在外掛程式裡 單獨

devserver:

當然也可以配置**

proxy: }}

(8)webpack.bannerplugin 在檔案頭新增注釋

(9)webpack.defineplugin 定義環境變數

const webpack = require('webpack');

const node_env = process.env.node_env; // 從命令列環境獲取 node_env 引數

module.exports = // 定義瀏覽器中的替換的變數為 `process.env.node_env`})]

}

(10)但是如果打包完檔案體積還是太大怎麼辦呢?

我們可以用另外乙個外掛程式commonschunkplugin

設定: plugins:

}

但是頁面必須引入

(11) 分析打包後專案用到的各種包的大小 webpack-visualizer-plugin

var visualizer = require('webpack-visualizer-plugin');

//...

plugins: [new visualizer()],

//...

其他

1.版本號控制

getpath('[name]@[chunkhash:6].css')

css 和 js 多 chrunk

// 生成抽離文字檔案外掛程式的例項

new extracttextplugin(,

allchunks: true

}),2.devtool: 'source-map' 原始碼對映 方便開發時除錯**

3.環境變數配置(mac)

設定:

>cd ~/.profile

>node

>process.env

出去 >export node_env=production //配置環境變數

//檢視

>node

>process.env.node_env => 'production'

window下是 set node_env=production

然後在package.json下

「script」:

然後在config.js中針對環境進行判斷 打包

npm i webpack -g
webpack.config.js,同gulpfile.js和gruntfile.js一樣,就是配置項
// 引入webpack

var webpack = require('webpack')

// 引入文字抽離外掛程式

var extracttextplugin = require('extract-text-webpack-plugin')

// 引入html生成外掛程式

var htmlwebpackplugin = require('html-webpack-plugin')

// 引入openbrowser 外掛程式

var openbrowserplugin = require('open-browser-webpack-plugin')

var outputdir = ''

if (process.env.node_env === 'dev') else

var public = ,

// 配置出口

output: ,

// devtool 配置

devtool: 'source-map',

// 配置模組

module: ]},

// 載入scss

,// ,

// //]

// css抽離

extracttextplugin.extract()

},// 載入css,]

},// 載入

},// 載入**檔案

},// 載入iconfont}]

},// 配置外掛程式

plugins: [

// 生成抽離文字檔案外掛程式的例項

new extracttextplugin(,

allchunks: true

}),// 生成編譯html(index.html)的外掛程式的例項

new htmlwebpackplugin(),

// 生成編譯html(search.html)的外掛程式的例項

new htmlwebpackplugin(),

// **壓縮

new webpack.optimize.uglifyjsplugin(,

output:

}),// 自動在開啟瀏覽器開啟頁面

// new openbrowserplugin()

]}var devserver =

},'/vip': }}

}}if (process.env.node_env === 'dev') , public, devserver)

} else

webpack1到webpack3的時候 loader載入格式更改

style-loader必須寫到fallback屬性上,版本1的時候直接loader:"style-loader!css-loader"

希望對大家有幫助!

webpack 一站到底一

webpack入門webpack在逐漸成為乙個成熟的青年路上,一直備受大家青睞,然而還在不斷的健身,希望以最好的姿態呈現給各位,如今他已經v3。比起1 2又強化骨骼,變得更堅實。官方給出 webpack 是前端資源模組化管理和打包工具 他可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端...

自如管家一站到底 守護租客安居生活

自如是一家提供高品質居住產品和生活服務的科技公司,自2011年上線以來,自如依託優質的服務贏得廣大租客的好評與喜愛程式設計客棧。在自如眾多優秀服務人員中,以自如管家為代表的服務者,通過貼心 專業 優質的服務,受到越來越多租客的信賴與認可。自如管家貼心服務,為租客生活提供保障 專業,值得信賴 簽約只是...

mysql的多表查詢(2)(一站到底,從簡到難)

還是用前面的三個表 一,多行子查詢 返回多行記錄的子查詢 1.使用關鍵字in 例如 顯示同乙個宿舍樓 1號宿舍樓 的同學,注意這裡用in 而不用 因為where後符合條件的id有多個值,in 說明滿足其中乙個就可以了 2,在多行子查詢中使用all操作符 顯示數學成績比測控2班的所有同學的成績高的同學...