webpack4入門配置
下面是抄過來的，方便本身翻越
webpack4.x入門配置
一、首先npm install webpack webpack-cli webpack-dev-server -g (mac電腦用超級管理員的形式進行安裝須要前面加上sudo,Windows 電腦不用加sudo)javascript
二、輸入命令mkdir config dist src建立三個文件夾css
三、輸入命令
npm init -y
package.json文件裏面的內容是最初的樣子
{
"name": "study_webpack2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
四、輸入命令touch dist/index.html src/index.js分別dist和src文件夾下面建立一個index.html文件和index.js文件html
五、webpack4.x中打包默認找src/index.js做爲默認入口，能夠直接在終端中輸入命令
webpack 將當前的內容進行一個簡單的打包
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
mode是webpack中獨有的，有兩種打包環境，一個是開發環境：development另一個是生產環境：production
打包的時候輸入webpack --mode=development或者webpack --mode=production就不會出現警告提示了前端
webapck --mode=production命令打包，這個是代碼壓縮過的，細心的朋友應該也發現打包後小了不少
六、輸入命令
touch config/webpack.dev.js建立文件
七、輸入命令
rm dist/main.js src/index.js移除掉這兩個文件咱們本身來配置
7.1 如今在src文件夾下面建立main.js文件
7.2進入到webpack.dev.js文件中進行配置，具體在代碼中註釋（這裏簡單的一些，具體的下面會給你們）
7.3如今不能執行以前的webpack --mode="development"命令了會報下面的錯誤java
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'錯誤，因此這裏咱們到packsge.json裏面配置下命令，讓打包的時候執行咱們在config/webpack.dev.js下面配置的入口。
這個時候咱們在終端執行輸入命令
npm run build就能夠了
八、如今配置打包時候的入口文件以及出口文件，不少朋友應該也看到webpack.dev.js中的註釋的，這裏的入口是
'./src/main.js'
//入口文件的配置項 entry:{ //裏面的main是能夠隨便寫的 main:'./src/main.js' }
這個時候咱們有兩個文件入口這麼辦呢？如今咱們再src文件夾下面建立main2.js
//入口文件的配置項 entry:{ //裏面的main是能夠隨便寫的 main:'./src/main.js', main:'./src/main2.js' //這裏新添加一個入口文件 },
這個時候咱們再使用以前配置的命令 npm run build 進行打包node
咱們會發現報錯提示 Conflict: Multiple assets emit to the same filename bundle.js 翻譯過來告訴咱們 衝突:多個資產發出相同的文件名bundle.js。這個時候就須要咱們來配置出口文件了，下面是以前的出口文件
//出口文件的配置項 output:{ //打包的路徑 path:path.resolve(__dirname,'../dist'), //打包的文件名稱 filename:'bundle.js' },
如今咱們將原來寫死的bundle.js給改爲了 [name].jsreact
注：[name]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就能夠打包出幾個文件。
9 、設置webpack-dev-server，剛開始的時候咱們就全局下載這裏就不須要下載了，如今須要配置一下devServer。最簡單的devServer配置項只有四個webpack
這個時候直接執行命令
webpack-dev-server會報錯
這個時候咱們終端輸入命令
npm run server就能夠跑起來了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="study"></div> <script src="./main.js"></script> <script src="./main2.js"></script> </body> </html>
保存後再到src文件下面分別給main.js和main2.js文件裏面寫一些東西。es6
這個是src/main.js文件下：web
alert("11111")
這個是src/main2.js文件下：
document.getElementById("study").innerHTML="hello webpack"
這個時候再再終端中輸入命令 npm run server 而後再打開瀏覽器再地址欄輸入locahost:8888 就能夠看到效果了，注意這裏的 locahost:8888 是以前你在下面這個文件配置的
devServer:{
//設置基本目錄結構,用於找到程序打包地址 contentBase:path.resolve(__dirname,'../dist'), //服務器的IP地址，可使用IP也可使用localhost host:'localhost', //服務端壓縮是否開啓 compress:true, //配置服務端口號 port:8888 }
十、CSS文件打包
下面學習一下怎麼樣將咱們的CSS文件打包，在學習CSS打包以前，須要先對webpack.dev.config.js裏的Loaders配置項進行了解。
loaders能夠把SASS文件的寫法轉換成CSS,也能夠把咱們項目中寫的ES六、ES7等給編譯成瀏覽器能解析的css，下面咱們先在src文件夾下面建立index.css文件，而且寫一些css在裏面
項目路徑： /src/css/index.css 裏面編輯代碼以下
這個時候須要在入口文件中引入才能夠進行打包
style-loader 和 css-loader
在終端輸入命令
npm install style-loader css-loader --save-dev下載依賴
npm run server看下
十一、下面咱們來配置JS壓縮
個人項目上線以前都會對代碼進行壓縮，不少都是經過插件的方式實現的，這裏咱們就先來引入一個uglifyjs-webpack-plugin(JS壓縮插件，簡稱uglify)。
這裏你們須要注意的：雖然uglifyjs是插件，可是webpack版本里默認已經集成，不須要再次安裝。
咱們須要在webpack.dev.config.js中引入uglifyjs-webpack-glugin插件
const uglify = require('uglifyjs-webpack-plugin');
引入後在plugins配置裏new一個 uglify對象就能夠了。
plugins:[
new uglify() ],
這個時候咱們再終端運行命令 npm run bulid 進行打包會提示下載webpack-cli 命令輸入yes
十二、打包HTML文件
如今咱們來對html進行打包，這個時候咱們須要將以前手動再dist文件夾下面寫的index.html文件移到src文件夾下面，並去掉咱們的JS引入代碼並去掉咱們的JS引入代碼（webpack會自動爲咱們引入JS），而後讓打包的時候自動再dist文件夾下面生成
而後咱們對webpack.dev.config.js文件進行配置，先引入html-webpack-plugin插件，而後在終端下載
npm install --save-dev html-webpack-plugin
這個時候再到webpack.dev.config.js的plugins裏面進行配置
//插件，用於生產模版和各項功能 plugins:[ new uglify(), //js壓縮插件 new htmlPlugin({ minify:{ //是對html文件進行壓縮 removeAttributeQuotes:true //removeAttrubuteQuotes是卻掉屬性的雙引號。 }, hash:true, //爲了開發中js有緩存效果，因此加入hash，這樣能夠有效避免緩存JS。 template:'./src/index.html' //是要打包的html模版路徑和文件名稱。 }) ],
此時咱們在終端輸入 npm run build 看見dist文件下面自動爲咱們生成了一個index.html文件裏面自動爲咱們引入了js以下：
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>Document</title> </head> <body> <div id=study></div> <script type=text/javascript src=main.js?5a6cef00acf20ba2a991></script><script type=text/javascript src=main2.js?5a6cef00acf20ba2a991></script></body> </html>
1三、CSS中的圖片處理
在這裏咱們首先在網上找一張圖片，而後在src文件下面的index.html文件中建立一個div而後給一個clss名，而後在css中添加背景圖，項目目錄：
./src/index.html文件裏面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="study"></div> <div class="img"></div> </body> </html>
./ src/css/index.css文件裏面
.img{ background-image: url(../images/photo.jpeg); width:466px; height:453px; }
打包看下會有報錯
這裏是由於咱們缺乏loader的解析,如今須要下載兩個解析圖片的loader
file-loader 和 url-loader
npm install --save-dev file-loader url-loader
解釋下：
file-loader：解決引用路徑的問題，拿background樣式用url引入背景圖來講，咱們都知道，webpack最終會將各個模塊打包成一個文件，所以咱們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css文件所在的路徑的。這就會致使圖片引入失敗。這個問題是用file-loader解決的，file-loader能夠解析項目中的url引入（不只限於css），根據咱們的配置，將圖片拷貝到相應的路徑，再根據咱們的配置，修改打包後文件引用路徑，使之指向正確的文件。
url-loader：若是圖片較多，會發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy。
如今須要咱們去webpack.dev.config.js文件配置下
//圖片 loader { test:/\.(png|jpg|gif|jpeg)/, //是匹配圖片文件後綴名稱 use:[{ loader:'url-loader', //是指定使用的loader和loader的配置參數 options:{ limit:500 //是把小於500B的文件打成Base64的格式，寫入JS } }] }
此刻咱們在終端中輸入 npm run build 打包的時候就不會報錯了，也能夠看到咱們的圖片被打包了
注意：爲何只使用了url-loader
有的小夥伴會發現咱們並無在webpack.dev.config.js中使用file-loader，可是依然打包成功了。咱們須要瞭解file-loader和url-loader的關係。url-loader和file-loader是什麼關係呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：
1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL（Base64格式）；
2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。
也就是說，其實咱們只安裝一個url-loader就能夠了。可是爲了之後的操做方便，咱們這裏就順便安裝上file-loader。
1四、css分離和圖片路徑處理
這裏咱們主要學習把CSS從JavasScript代碼中分離出來，還有一個是如何處理分離出來後CSS中的圖片路徑不對問題。
如今咱們要下載一個css分離的插件： extract-text-webpack-plugin
咱們在輸入命令 npm install extract-text-webpack-plugin --save-dev
14.1下載完插件後，須要咱們配置一下
14.2配置後須要在plugins屬性中進行配置
new extractTextPlugin("css/index.css") //這裏的/css/index.css 是分離後的路徑
14.3如今還須要修改一下配置裏面css的loader的配置
{
test:/\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }), // css分離後這裏須要從新配置，下面就註釋了 // use:[ // {loader: "style-loader"}, // {loader:"css-loader"} // ] },
14.4這個時候打包會報錯
是由於咱們用的是webpack4.0.0以上版本
如今看下package.json文件
"devDependencies": { "css-loader": "^0.28.11", extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.15" }
解決辦法：
npm install --save-dev extract-text-webpack-plugin@next
會下載到+ extract-text-webpack-plugin@4.0.0-beta.0
這個時候看下package.json文件
而後在打包就正常了
14.5如今配置下咱們的路徑問題
publicPath：是在webpack.dev.config.js文件的output選項中，主要做用就是處理靜態文件路徑的。
在處理前，咱們在webpack.dev.config.js 上方聲明一個對象，叫website。
var website ={ publicPath:"http://localhost:8888/" // publicPath:"http://192.168.1.103:8888/" } 這裏的IP和端口，是你本機的ip或者是你devServer配置的IP和端口。
而後在output選項中引用這個對象的publicPath屬性。
output:{
//打包的路徑 path:path.resolve(__dirname,'../dist'), //打包的文件名稱 filename:'[name].js', //這裏[name] 是告訴咱們入口進去的文件是什麼名字，打包出來也一樣是什麼名字 publicPath:website.publicPath //publicPath：主要做用就是處理靜態文件路徑的。 },
配置完成後，你再使用webpack命令進行打包，你會發現原來的相對路徑改成了絕對路徑，這樣來說速度更快。
1五、處理HTML中的圖片
在webpack中是不喜歡你使用標籤<img>來引入圖片的，可是咱們做前端的人特別熱衷於這種寫法，國人也爲此開發了一個：html-withimg-loader。他能夠很好的處理咱們在html 中引入圖片的問題，如何把圖片放到指定的文件夾下
//圖片 loader { test:/\.(png|jpg|gif|jpeg)/, //是匹配圖片文件後綴名稱 use:[{ loader:'url-loader', //是指定使用的loader和loader的配置參數 options:{ limit:500, //是把小於500B的文件打成Base64的格式，寫入JS outputPath:'images/', //打包後的圖片放到images文件夾下 } }] }
如今下載 html-withimg-loader 解決的問題就是在hmtl文件中引入<img>標籤的問題.
首先安裝
npm install html-withimg-loader --save-dev
到webpack.dev.config.js中配置loader
{
test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] }
這個時候打包會發現已經生成了images文件夾和圖片的文件
1六、Less文件的打包和分離
下面主要說下Less文件如何打包和分離。Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
首先要安裝Less的服務
npm install --save-dev less
而後再安裝Less-loader用來打包使用
npm install --save-dev less-loader
如今再去webpack-dev.config配置less-loader
//less loader { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }
編寫一個less文件
src/css/indexless.less
@base :#000; #study{ width:300px; height:300px; background-color:@base; }
引入到mian.js文件中
16.1把Lees文件分離。
這裏和上面css文件分離基本同樣，
//less loader { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) // [{ // loader: "style-loader" // creates style nodes from JS strings // }, // { // loader: "css-loader" // translates CSS into CommonJS // }, // { // loader: "less-loader" // compiles Less to CSS // }] }
配置好，打包運行後，你會發現less被分離到了index.css文件裏。
16.2 SASS文件的打包和分離
其實sass跟less 的配置很像，這裏sass首先要安裝兩個包，node-sass和sass-loader,由於sass-loader依賴於node-sass，因此須要先安裝node-sass
npm install node-sass --save-dev
而後下面再安裝 sass-loader
npm install sass-loader --save-dev
配置loader配置
//scss loader { test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }
這裏跟上面的less 同樣，寫好loader配置後，就能夠編寫sass文件了，可是不要忘記把sass文件引入到main.js中。
16.3把SASS文件分離。
上面已經下載過了插件，這裏直接用就能夠了
{
test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) } 配置好之後咱們 `npm run build` 就能夠看到了dist下面的index.css中有了indexsass.scss中寫的被解析的代碼
16.4 自動處理CSS3屬性前綴
首先須要安裝兩個包postcss-loader 和autoprefixer（自動添加前綴的插件）
npm install --save-dev postcss-loader autoprefixer
postCSS推薦在項目根目錄（和webpack.config.js同級），創建一個postcss.config.js文件。【注意⚠️：必定呀建在根目錄下，否則會報錯】
module.exports={ plugins: [ require('autoprefixer') //自動添加前綴插件 ] }
在webpack.dev.cnfig.js中配置
{
test:/\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use:[{loader:"css-loader"}, { loader:"postcss-loader", }, ] }) },
如今在index.css中寫一些代碼不帶前綴的，命令打包後在看下，這個時候已經自動爲咱們加上了前綴。
1七、消除未使用的CSS
使用PurifyCSS能夠大大減小CSS冗餘，好比咱們常用的BootStrap(140KB)就能夠減小到只有35KB大小。這在實際開發當中是很是有用的。
安裝PurifyCSS-webpack
PurifyCSS-webpack要依賴於purify-css這個包，因此兩個都要下載
npm install purifycss-webpack purify-css --save-dev
由於咱們須要同步檢查html模板，因此咱們須要引入node的glob對象使用。在webpack.dev.config.js文件頭部引入glob
const glob = require('glob');
一樣在webpack.dev.config.js文件頭部引入purifycss-webpack
const PurifyCSSPlugin = require("purifycss-webpack");
而後在webpack.dev.config.js中配置 plugins
new PurifyCSSPlugin({ //這裏配置了一個paths，主要是需找html模板，purifycss根據這個配置會遍歷你的文件，查找哪些css被使用了。 paths: glob.sync(path.join(__dirname, 'src/*.html')), }),
注意： 使用這個插件必須配合extract-text-webpack-plugin這個插件
1八、給webpack增長babel支持
Babel的安裝與配置
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack.dev.config.js中配置Babel的方法以下：
//babel 配置 { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ }
而後在main.js中用es6語法寫一些代碼，而後打包就能夠看見打包成功了
18.一、.babelrc配置
雖然Babel能夠直接在webpack.config.js中進行配置，可是考慮到babel具備很是多的配置選項，若是卸載webapck.config.js中會很是的雍長不可閱讀，因此咱們常常把配置卸載.babelrc文件裏。
在項目根目錄新建.babelrc文件，並把配置寫到文件裏。
.babelrc文件下
{
"presets":["react","es2015"] }
這時候.webpack.dev.config.js裏的loader配置
//babel 配置 { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', }, exclude:/node_modules/ }
18.三、 ENV：
如今網絡上已經不流行babel-preset-es2015，如今官方推薦使用的是babel-preset-env,那咱們爲了緊跟潮流，咱們在講一下env的配置方法。
首先須要下載：
npm install --save-dev babel-preset-env
而後修改.babelrc裏的配置文件。其實只要把以前的es2015換成env就能夠了。
{
"presets":["react","env"] }
- 1. webpack4 入門配置研究
- 2. webpack4入門篇
- 3. webpack4入門
- 4. webpack4 入門（一）
- 5. Webpack4 一、入門
- 6. webpack4 入門（二）
- 7. webpack4 配置
- 8. 配置webpack4
- 9. webpack4 optimization配置
- 10. webpack4配置
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Eclipse Debug 配置 - Eclipse 教程
- • YAML 入門教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
- 1. webpack4 入門配置研究
- 2. webpack4入門篇
- 3. webpack4入門
- 4. webpack4 入門（一）
- 5. Webpack4 一、入門
- 6. webpack4 入門（二）
- 7. webpack4 配置
- 8. 配置webpack4
- 9. webpack4 optimization配置
- 10. webpack4配置