2. 程式人生 > >webpack4.x入門配置

webpack4.x入門配置

阿新 • • 發佈：2019-01-14

轉自 https://www.jianshu.com/p/6712e4e4b8fe

1、首先npm install webpack webpack-cli webpack-dev-server -g (mac電腦用超級管理員的形式進行安裝需要前面加上sudo,Windows 電腦不用加sudo)

image.png1.1輸密文的密碼（也就是電腦登陸的密碼）安裝開始…………
image.png1.2安裝成功如下
image.png

2、輸入命令mkdir config dist src建立三個資料夾

image.png2.1資料夾如下所示：image.png
3、輸入命令npm init -y
image.png3.1細心的你應該發現編輯器裡面多了package.json這個檔案
image.png
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"
}

4、輸入命令touch dist/index.html src/index.js

分別dist和src資料夾下面建立一個index.html檔案和index.js檔案

image.png專案目錄目前如下：image.png
5、webpack4.x中打包預設找src/index.js作為預設入口，可以直接在終端中輸入命令webpack 將當前的內容進行一個簡單的打包image.png這時候看下你的專案目錄dist檔案下是不是多了一個main.js檔案
image.png5.1細心的小夥伴應該看到打包的時候終端中會出現黃色的警告提示
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就不會出現警告提示了

image.png下面是webapck --mode=production命令打包，這個是程式碼壓縮過的，細心的朋友應該也發現打包後小了很多image.png同時專案資料夾下面多了 一個node_modules資料夾
image.png
6、輸入命令touch config/webpack.dev.js建立檔案image.png回車後，現在專案目錄如下：image.png
7、輸入命令rm dist/main.js src/index.js移除掉這兩個檔案我們自己來配置image.png專案目錄如下：image.png
7.1 現在在src資料夾下面建立main.js檔案image.png
7.2進入到webpack.dev.js檔案中進行配置，具體在程式碼中註釋（這裡簡單的一些，具體的下面會給大家）
image.png

7.3現在不能執行之前的webpack --mode="development"命令了會報下面的錯誤

image.png這裡是因為webpack4打包預設找的src下面的index.js入口，我們前面已經刪除了，這裡src下面死main.js檔案，所以找不到就報ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'錯誤，所以這裡我們到packsge.json裡面配置下命令，讓打包的時候執行我們在config/webpack.dev.js下面配置的入口。image.png
這個時候我們在終端執行輸入命令 npm run build就可以了
image.png
8、現在配置打包時候的入口檔案以及出口檔案，很多朋友應該也看到webpack.dev.js中的註釋的，這裡的入口是 './src/main.js'
 //入口檔案的配置項
    entry:{
         //裡面的main是可以隨便寫的
         main:'./src/main.js'
    }
這個時候我們有兩個檔案入口這麼辦呢？現在我們再src資料夾下面建立main2.jsimage.png
  //入口檔案的配置項
    entry:{
         //裡面的main是可以隨便寫的
         main:'./src/main.js',
         main:'./src/main2.js' //這裡新新增一個入口檔案
    },

這個時候我們再使用之前配置的命令 npm run build 進行打包

image.png
我們會發現報錯提示 Conflict: Multiple assets emit to the same filename bundle.js 翻譯過來告訴我們 衝突:多個資產發出相同的檔名bundle.js。這個時候就需要我們來配置出口檔案了，下面是之前的出口檔案
 //出口檔案的配置項
    output:{
         //打包的路徑
        path:path.resolve(__dirname,'../dist'),
        //打包的檔名稱
        filename:'bundle.js'
    },

現在我們將原來寫死的bundle.js給改成了 [name].js

image.png這個時候我們再執行打包命令看下image.png已經打包好了，這個時候看下出口檔案dist下面也打包生成了兩個相同入口名字的檔案image.png
注：[name]的意思是根據入口檔案的名稱，打包成相同的名稱，有幾個入口檔案，就可以打包出幾個檔案。

9 、設定webpack-dev-server，剛開始的時候我們就全域性下載這裡就不需要下載了，現在需要配置一下devServer。最簡單的devServer配置項只有四個

image.png
這個時候直接執行命令webpack-dev-server會報錯image.png這個時候我們可以到packsge.json裡面配置下image.png
這個時候我們終端輸入命令npm run server就可以跑起來了image.png然後我們再到專案dist資料夾下面的index.html 檔案中引入打包的兩個js
<!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檔案裡面寫一些東西。

這個是src/main.js檔案下：

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
    }

10、CSS檔案打包
下面學習一下怎麼樣將我們的CSS檔案打包，在學習CSS打包之前，需要先對webpack.dev.config.js裡的Loaders配置項進行了解。
loaders可以把SASS檔案的寫法轉換成CSS,也可以把我們專案中寫的ES6、ES7等給編譯成瀏覽器能解析的css，下面我們先在src資料夾下面建立index.css檔案，並且寫一些css在裡面

專案路徑： /src/css/index.css 裡面編輯程式碼如下

image.png
這個時候需要在入口檔案中引入才可以進行打包image.png這個時候我們在終端中輸入命令進行打包，會看到這樣的報錯image.png這是因為我們要想用打包css需要下載配置css 的loader：style-loader 和 css-loader
在終端輸入命令 npm install style-loader css-loader --save-dev下載依賴image.png現在到webpack.dev.config.js中對module屬性中的程式碼進行配置image.png這個時候我們的css . loader就配置好了，可以在命令終端中試著輸入 npm run server看下image.png打包成功了，然後再進入到瀏覽器發現已經有效果了image.png
11、下面我們來配置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

image.png然後下載一會，下載好了以後，看下dist下面的出口main.js檔案裡面的js都被壓縮了image.png
12、打包HTML檔案
現在我們來對html進行打包，這個時候我們需要將之前手動再dist資料夾下面寫的index.html檔案移到src資料夾下面，並去掉我們的JS引入程式碼並去掉我們的JS引入程式碼（webpack會自動為我們引入JS），然後讓打包的時候自動再dist資料夾下面生成image.png
然後我們對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>

13、CSS中的圖片處理

在這裡我們首先在網上找一張圖片，然後在src檔案下面的index.html檔案中建立一個div然後給一個clss名，然後在css中新增背景圖，專案目錄：image.png
./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;
}

打包看下會有報錯

image.png
這裡是因為我們缺少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 打包的時候就不會報錯了，也可以看到我們的圖片被打包了

image.png
注意：為什麼只使用了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。

14、css分離和圖片路徑處理
這裡我們主要學習把CSS從JavasScript程式碼中分離出來，還有一個是如何處理分離出來後CSS中的圖片路徑不對問題。
現在我們要下載一個css分離的外掛： extract-text-webpack-plugin
我們在輸入命令 npm install extract-text-webpack-plugin --save-dev

image.png
14.1下載完外掛後，需要我們配置一下image.png
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這個時候打包會報錯image.png

是因為我們用的是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 [email protected] 
會下載到+ [email protected]0.0-beta.0
這個時候看下package.json檔案image.png然後在打包就正常了image.png

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命令進行打包，你會發現原來的相對路徑改為了絕對路徑，這樣來講速度更快。image.png

15、處理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資料夾和圖片的檔案image.png

16、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檔案中image.png

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檔案裡。image.png

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中寫一些程式碼不帶字首的，命令打包後在看下，這個時候已經自動為我們加上了字首。

17、消除未使用的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這個外掛
18、給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.1、.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.3、 ENV：
現在網路上已經不流行babel-preset-es2015，現在官方推薦使用的是babel-preset-env,那我們為了緊跟潮流，我們在講一下env的配置方法。
首先需要下載：

npm install --save-dev babel-preset-env

然後修改.babelrc裡的配置檔案。其實只要把之前的es2015換成env就可以了。

{
    "presets":["react","env"]
}

相關推薦

webpack4.x入門配置

轉自 https://www.jianshu.com/p/6712e4e4b8fe1、首先npm install webpack webpack-cli webpack-dev-server -g (mac電腦用超級管理員的形式進行安裝需要前面加上sudo,Windows 電腦不用加sudo)image.pn

【webpack系列】webpack4.x入門配置基礎（一）

一、前言 webpack在不斷的迭代優化，目前已經到了4.29.6。在webpack4這個版本中，做了很多優化，引入了很多特性，將獲得更多模組型別，.mjs支援，更好的預設值，更為簡潔的模式設定，更加智慧的chunk，新增的splitChunks來自定義分隔程式碼塊等等。升級待4，在打包速度，程式碼體積，數

webpack4.0入門配置檔案

wepback風頭正火 ，但是公司一直在用gulp，正好趕上年底活動，藉此機會第一次嘗試了webpack，說實話webpack真的很強大，內容一層一層遞進。 這幾天跟著官網跑了一遍，然後寫了自己的配置檔案，因為活動內容不多，很多強大的功能沒有用上，但是相信對於入門來說足夠了。 下面來總結並附上原始碼 當

webpack4.x初步配置vue專案

說明 參考vue-cli webpack模板, 用 webpack4.x配置了vue專案 開始 與browserify不同,webpack是配置式的,所以我會先把配置檔案寫上,並在檔案裡面寫好註釋 專案結構 |-- webpack-demo | |

webpack4.x 入門一篇足矣

前言：webpack4出了以後，一些外掛變化很大，和之前的版本使用方式不一樣，新手入坑，本篇將介紹如何從一開始配置webpack4的開發版本，對css，js進行編譯打包合併生成md5，CSS中的圖片處理，js自動注入html頁，刪除指定檔案，提取公共檔案，熱更新等等。安裝//全域性安裝 npm instal

webpack4.x開發環境配置

num bee 出現 總結 str pri 全局 這也 \n 寫這篇文章的初衷在於，雖然網絡上關於webpack的教程不少，但是大多已經過時，由於webpack版本更新後許多操作變化很大，很多教程的經驗已經不適合。當我們使用npm安裝webpack時，若不指定webpack

webpack4.x最詳細入門指南

api 包括 顯示 [] 靈活 public 手動 ppi webkit 前言 本文主要從webpack4.x入手，會對平時常用的Webpack配置一一講解，各個功能點都有對應的詳細例子，所以本文也比較長，但如果你能動手跟著本文中的例子完整寫一次，相信你會覺得Webpa

webpack4.x配置過程（二）

此文根據阮一峰大神的demo結合自己的配置專案改編而成：github 1、demo01，這個是一個非常簡單的demo，請仔細實踐上一篇。 2、dem02，配置多入口檔案： 2.1、新建src/search.js，輸入document.write(‘i

webpack4入門配置

下面是抄過來的，方便自己翻越 webpack4.x入門配置   1、首先npm install webpack webpack-cli webpack-dev-server -g (mac電腦用超級管理員的形式進行安裝需要前面加上sudo,Windows 電腦不用

webpack4.x最詳細入門講解

前言 Webpack其實沒有想象中的那麼難，用得多了，其實套路都一樣，本文主要是針對webpack4.x版本，會對平時常用的Webpack配置一一講解，所以本文也比較長，但如果你能動手跟著本文中的例子完整寫一次，相信你會覺得Webpack也不過如此。 一、什麼是webpack，為什麼使用它？ 1.1 什麼是

webpack4.x為圖片資源配置base64編碼規範

webpack可以通過url-loader（file-loader）來完成對符合要求圖片資源進行base64編碼轉換的功能。 下面直接上webpack.config（即通過url-loader的lim

webpack4.x——htmlWebpackPlugin的minify各配置項用法說明

htmlWebpackPlugin中內建了html-minifier，這個外掛多用於頁面資源壓縮，但是常用的配置說明不太容易理解（而且多數配置預設是不起效的），故本文將對常用的配置進行補充說明。 removeComments（預設值false） 清理html中

webpack4.x配置過程（一）

從 webpack v4.0.0 開始，可以不用引入一個配置檔案。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：入口(entry)，輸出(output)，loader，外掛(plugins)，其次還有就是mode(模式)。 以下是官方文件解析： ent

react搭建專案之webpack4.x的相關配置及分析

       webpack一直再更新，webpack作為前端構建工具，有它 的優勢性。每次更新webpack為了讓這個工具使用起來更加方便，效能優化。在webpack3.x時，在打包壓縮時，必須得使用額外的外掛，配置雖然不是那麼麻煩有官網，但這是一個耗時耗力的事情。webp

Webpack4.x安裝與使用入門

安裝 在全域性安裝webpack npm install -g webpack 建立專案 建立新資料夾webpack-study，用於存放專案。命令列定位到該資料夾下。輸入以下命令進行初始化。 npm init 然後根據專案情況配置選項或直接回車。 此時發現在該資料夾內新

學習webpack4.X（一，安裝和配置熱更新）

什麼是webpack WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Sass，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。在3.0出現後

webpack4.x下babel的安裝、配置及使用

前言 　　目前，ES6（ES2015）這樣的語法已經得到很大規模的應用，它具有更加簡潔、功能更加強大的特點，實際專案中很可能會使用採用了ES6語法的模組，但瀏覽器對於ES6語法的支援並不完善。為了實現相容，就需要使用轉換工具對ES6語法轉換為ES5語法，bab

webpack4.2開發環境入門配置

webpack4.x開發環境配置 寫這篇文章的初衷在於，當我們使用npm安裝webpack時，若不指定webpack的版本，將預設安裝最新版，筆者測試時預設安裝的是4.26.1，並不能照搬老教程的方法。為此，筆者進行了最新版配置的探索，使用的是windows作業系統，如果你的是webpa

Webpack4.x 版本入門指南

本文是基於一位以前公司的同事zzj所寫的 Webpack入門指南 這篇文章做構建。本文是基於win環境搭建的webpack，以前的同事寫的入門指南是webpack3.0版本，最近想用webpack卻發現它已經更新到了4.1.x，於是遇到了幾個坑，也為了給想入門webpack的

webpack4.x 配置下載第三方庫,分離js成單個檔案引入HTML 第十節

使用第三庫:  1. 直接npm下載，然後引入（完全可以使用，但是我個人不是很推薦） cnpm i jquery -S import $ from 'jquery' $(xxxx).on() $(xxx).css() ProvidePlugin (個人推薦此方式