1.安裝webpack
全域性安裝 sudo npm install -g webpack
本專案安裝 npm i webpack -d
目錄結構
2.webpack配置
每個專案下都必須配置有乙個 webpack.config.js ，它的作用如同常規的 gulpfile.js/gruntfile.js ，就是乙個配置項，告訴 webpack 它需要做什麼。
在根目錄新建js檔案 webpack.config.js
varpath =
require(
"path");
varwebpack =
require(
"webpack");
varhtmlwebpackplugin =
require(
"html-webpack-plugin");
varopenbrowserwebpackplugin =
require(
"open-browser-webpack-plugin");
varextracttextwebpackplugin =
require(
"extract-text-webpack-plugin");
// 抽離樣式 css檔案
module.
exports = ,
module:, ),
//不用手動除以100 幫我們除以100
require(
"autoprefixer")()
//自動補全 ]
} }},
"sass-loader"] })
},
] },
devserver:,
resolve: },
plugins:[
newopenbrowserwebpackplugin(),
newhtmlwebpackplugin(),
newextracttextwebpackplugin(),
newwebpack.
hotmodulereplacementplugin(), ]
}
webpack構建react應用
一 新建乙個資料夾。mkdir webpack react demo二 在此資料夾下建立package.json檔案 右鍵新建檔案也行。這裡使用 npm init 初始化專案的方式自動生成。在webpack react demo資料夾下進入cmd命令列，輸入npm init，一路enter就行。三 ...
前端webpack構建react系列三 分模組打包
分模組打包檔案 在生產環境中，我們應該盡量減小js檔案的大小，將框架性的js裝載在乙個檔案中利用瀏覽器的快取機制節約載入資源耗費時間 分塊思路 1 react，react dom這種由第三方維護的框架，一般不會進行更新。真要更新就麻煩了，親身經歷，上級部門強制要求修復語言漏洞，硬逼著我們將某老專案p...
webpack 1 x構建react專案簡單配置
var path require path var webpack require webpack var openbrowserplugin require open browser webpack plugin var htmlwebpackplugin require html webpack...