資訊專欄INFORMATION COLUMN
摘要：的用法全在配置中是在環(huán)境下運(yùn)行的，學(xué)習(xí)之前，請先自行安裝環(huán)境含安裝第一步全局安裝第二步建立項目文件夾，如一直回車下去項目目錄本地安裝搭建目錄結(jié)構(gòu)在項目根目錄下的簡單目錄結(jié)構(gòu)如下入口文件安裝時，自動建立
----------webpack的用法全在配置中??！
webpack是在node環(huán)境下運(yùn)行的，學(xué)習(xí)webpack之前，請先自行安裝node環(huán)境（含npm）；
第一步：
npm install -g webpack //全局安裝
第二步：
建立項目文件夾，如“demo”
cd demo
npm init //一直回車下去
npm install webpack --save-dev //項目目錄本地安裝
搭建目錄結(jié)構(gòu)
在項目根目錄“demo”下的簡單目錄結(jié)構(gòu)如下：
--app
--index.js //入口文件
--node_modules //安裝modules時，自動建立
--tem //HTML模板文件夾
--index.html
--webpack.config.js //自建，不會自動生成；一般會有開發(fā)和發(fā)布兩種配置文件
--package.json //由npm init時自動建立
webpack簡單配置：
webpack的用法全部都在webpack.config.js中；其他地方不要夾雜webpack配置的內(nèi)容；
//webpack.config.js寫入以下內(nèi)容
//引入內(nèi)置功能模塊(不需要另行安裝)；
var path = require("path");
var webpack = require("webpack");
//引入第三方功能模塊（需要另行安裝）；
//關(guān)于第三方模塊的用法，強(qiáng)烈建議直接看文檔；
var HtmlWebpackPlugin = require("html-webpack-plugin");
//定義常用路徑變量；
//返回當(dāng)前文件（webpack.config.js）所在位置
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH,"app"); //拼接路徑；
var TEM_PATH = path.resolve(ROOT_PATH,"tem");
var BUILD_PATH = path.resolve(ROOT_PATH,"build");
module.exports = {
entry : {
//入口文件
app : APP_PATH,
vendors : ["react","react-dom"]
},
output : {
//產(chǎn)出路徑；
path : BUILD_PATH,
filename : "[name].js"
},
module : {
//一切資源(images/css/js...)皆模塊，一切需要loader解析；
loaders : [
{test:/.js?$/,
loader:"jsx",
exclude:/node_modules/}
]
},
plugins : [
//生成HTML文件；
new HtmlWebpackPlugin({
title : "Hello world app!",
template : path.resolve(TEM_PATH,"index.html"),
filename : "index.html",
chunks : ["vendors","app"],
inject : "body",
// chunksSortMode : "none"
}),
new webpack.HotModuleReplacementPlugin() //保證實(shí)時刷新；
],
devServer:{
//實(shí)時刷新，需要inline model和hot:true
histroyApiFallback : true,
hot : true,
inline : true,
progress : true
}
}
注意：webpack分析webpack.config.js中的entry file到其他文件中查找依賴，所有文件被包含在bundle.js中；
webpack給每個module（注意：所有文件都是module，包括通過loaders進(jìn)來的圖片、css等）一個獨(dú)立id；并使所有module在bundle.js中可以通過id訪問； 啟動時，只有entry chunk被執(zhí)行；
webpack支持CMD和AMD規(guī)范，但不要在入口文件中使用AMD規(guī)范，會報錯；
Development Server://Webpack搭建本地服務(wù)器，監(jiān)聽文件改變，整個頁面實(shí)時更新；但是不會輸出結(jié)果文件到磁盤，適于生產(chǎn)環(huán)境下調(diào)試；
//webpack-dev-server調(diào)用的腳本文件不是output的文件，而是保存在內(nèi)存中的文件……目前引用的方法只知道用Html-webpack-plugin自動生成html頁面來引用；
常用配置：
plugins : [
//保證實(shí)時更新，需要啟用內(nèi)置的HotModuleReplacementPlugin插件；
new webpack.HotModuleReplacementPlugin()
],
devServer:{
//server切換到inline model
histroyApiFallback : true,
hot : true,
inline : true,
progress : true
}
注意：webpack-dev-server允許內(nèi)網(wǎng)訪問------設(shè)置host 0.0.0.0
//webpack-dev-server是實(shí)現(xiàn)頁面整體刷新；
//在package.json文件中配置"script"腳本設(shè)置快捷命令方式
//以下命令行參數(shù)不要和上邊webpack.config.js中的配置有交集，好像會報錯；
"scripts": {
"start":"webpack-dev-server --colors --host 0.0.0.0 --port 8080"
}
使用命令行模式npm run start運(yùn)行webpack-dev-server；
使用不同的配置build項目：
//根據(jù)需求綁定不同的配置文件并設(shè)置scripts腳本運(yùn)行方式；
"scripts": {
"start": "webpack-dev-server --hot --inline",
"build": "webpack --progress --colors --config webpack.production.config.js"
}
本人是初學(xué)者，有問題希望大家一起探討，共同進(jìn)步，謝謝；
實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)；可以看著入口文件和webpack.config.js，猜測應(yīng)該出現(xiàn)的結(jié)果，然后再執(zhí)行一下，檢驗(yàn)一下；
推薦一篇文章：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79269.html
摘要：官方文檔官方文檔，官方文檔永遠(yuǎn)是學(xué)習(xí)資料的第一步起步扎實(shí)的基本功。學(xué)習(xí)的新特性，理解，建議可以看看阮一峰的教程。的學(xué)習(xí)曲線會比較長，需要了解到的常用命令，以及和的模塊規(guī)范，的也很多，其實(shí)更多的是屬于一項后端語言。 學(xué)習(xí)Vue2.0的建議順序 注：本文是看過其他關(guān)于vue文章之后的想法，歡迎轉(zhuǎn)載，請注明出處。 Vue官方文檔：Vue2.0官方文檔，官方文檔永遠(yuǎn)是學(xué)習(xí)資料的第一步 起步...
摘要：在的配置項中，可能會見到這樣的字符。的情況的可以指定。值是特定于整個構(gòu)建過程的。。因此，以上兩個值中更推薦的是。中的則和前面的一樣，指定了結(jié)果的截取長度。的情況被引用的通過來得到帶的文件。所以，這可能并不是我們想要的。 在webpack的配置項中，可能會見到hash這樣的字符。 當(dāng)存在hash配置的時候，webpack的輸出將可以得到形如這樣的文件： page1_bundle_54e8...
摘要：前言對于的配置以及常用模塊大家應(yīng)該都比較熟悉，本文將說一說的一些常用插件，以及用法。如果在一個前面加了它會被定義為調(diào)用。或者被模塊的導(dǎo)出的內(nèi)容所賦值，以支持命名導(dǎo)出。用于生成的文檔的標(biāo)題默認(rèn)為將寫入的文件默認(rèn)模板的相對或絕對路徑。 前言 對于webpack的配置以及常用模塊大家應(yīng)該都比較熟悉，本文將說一說webpack的一些常用插件，以及用法。 目錄 1.內(nèi)置插件 名稱 參數(shù) 說明...
摘要：前言對于的配置以及常用模塊大家應(yīng)該都比較熟悉，本文將說一說的一些常用插件，以及用法。如果在一個前面加了它會被定義為調(diào)用。或者被模塊的導(dǎo)出的內(nèi)容所賦值，以支持命名導(dǎo)出。用于生成的文檔的標(biāo)題默認(rèn)為將寫入的文件默認(rèn)模板的相對或絕對路徑。 前言 對于webpack的配置以及常用模塊大家應(yīng)該都比較熟悉，本文將說一說webpack的一些常用插件，以及用法。 目錄 1.內(nèi)置插件 名稱 參數(shù) 說明...
摘要：關(guān)于模板的有好幾種。一次安裝所有的大家可以了解一些的用法把編譯成。安裝參考文檔功能將源文件遷移到指定的目錄，返回新的文件路徑。安裝用法它會將所有的入口中引用的移動到和頁面對應(yīng)的獨(dú)立分離的文件。 webpack是需要自己編寫自己需要的一個配置對象，取決你如何使用webpack,下面指定了所有的可用的配置選項。參考文檔：https://doc.webpack-china.org... we...
閱讀 5792·2021-11-24 10:25
閱讀 2715·2021-11-16 11:44
閱讀 3865·2021-10-11 11:09
閱讀 3184·2021-09-02 15:41
閱讀 3269·2019-08-30 14:14
閱讀 2297·2019-08-29 14:10
閱讀 2359·2019-08-29 11:03
閱讀 1136·2019-08-26 13:47
