webpack4.0入門配置

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

image.png

1.1輸密文的密碼（也就是電腦登陸的密碼）安裝開始…………

image.png

1.2安裝成功如下

image.png

2、輸入命令mkdir config dist src創建三個文件夾

image.png

2.1文件夾如下所示：

image.png

3、輸入命令npm init -y

image.png

3.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.png

5.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.js

image.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 extract-text-webpack-plugin@next 
會下載到+ extract-text-webpack-plugin@4.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"]
}

轉發鏈接地址：https://www.jianshu.com/p/6712e4e4b8fe

webpcak4.0入門配置

webpack4.0入門配置

深入學習作用域和閉包—全面（JS系列之二）

一名合格前端人員必須知道的 this 用法和陷阱（JS系列之三）

深入瞭解JavaScript執行過程（JS系列之一）

Element-ui 和 vue-cropper 實現圖片上傳按尺寸大小裁剪

水平、垂直居中佈局大全

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結