webpack4.x基本配置

在學習vue的時候，須要進行打包操做，視頻看的是webpack3的踩了好多坑，因此在記錄一下，方便後續複習。有錯誤請指出。

1. 新建項目文件
2. 在項目文件下 執行npm init -y，進行初始化，生成package.json文件
3. 能夠安裝淘寶鏡像，使用cnpm下載的會快點   npm install -g cnpm --registry=https://registry.npm.taobao.org
4. cnpm install -d  能夠看到當前項目文件下面多了node_modules文件夾
5. 嘗試打包   webpack ./src/main.js -o ./dist/bundle.js --mode development 此時會提示是否要安裝webpack-cli，也能夠使用cnpm install webpack-cli -g 安裝   g-表示全局安裝，d-表示本地安裝

 可以使用webpack -v查看當前版本號。

接下來進行打包，使用 webpack ./src/main.js -o ./dist/bundle.js --mode development 語句，打包成功。能夠看到多了一個dist文件夾，但打包出來的文件是設置的文件名bundle.js

 

若是有引入jquery，還須要手動安裝jquery。npm install jquery -D


 

 

 測試：在html文件中引入打包的js文件，在本地運行能夠看到效果。

 注意：這裏每修改一次都要從新打包。

出入口文件配置

   新建webpack.config.js文件，進行基本配置。指定完出入口以後，能夠直接使用「webpack」 進行打包，但修改後仍是須要手動更新。

接下來設置項目熱部署，使用webpack-dev-server實現自動打包編譯功能

 1. 運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴
 2. 安裝完畢後，這個工具的用法和 webpack 命令的用法，徹底同樣
 3. 因爲，咱們是在項目中，本地安裝的 webpack-dev-server ， 因此，沒法把它看成 腳本命令，在powershell 終端中直接運行；（只有那些 安裝到 全局 -g 的工具，才能在 終端中正常執行）
 4. 注意： webpack-dev-server 這個工具，若是想要正常運行，要求，在本地項目中，必須安裝 webpack

這裏須要在package.json文件的script項裏定義"dev":"webpack-dev-server" 表明我執行npm run dev時就執行這句話。執行npm run dev，報錯了。。。。

本地安裝webpack和webpack-cli。安裝完packed.json文件裏會顯示相關的版本信息。若是本地安裝完以後仍是不行能夠試試全局安裝

npm install webpack-dev-server -g

 5. webpack-dev-server 幫咱們打包生成的 bundle.js 文件，並無存放到實際的物理磁盤上；而是直接託管到了 電腦的內存中，因此咱們在項目根目錄中，根本找不到這個打包好的bundle.js;
 6. webpack-dev-server 把打包好的文件，以一種虛擬的形式託管到了項目的根目錄中，雖然咱們看不到它，可是能夠認爲和dist，src，node_modules 平級，有一個看不見的文件，叫作bundle.js
 這裏遇到一個問題，我已經安裝過了webpack，可是仍是提示Error: Cannot find module 'webpack'。緣由多是webpack沒有本地安裝，從新安裝一下就行了。

執行cnpm install webpack webpack-cli -D，而後npm run dev ，成功！如今能夠點擊端口號打開項目的頁面，可是樣式仍是沒有變。緣由是剛開始在index.html裏寫死了<script src="../dist/bundle.js"></script>。改爲這樣就能夠自動打包編譯而且實時刷新瀏覽器<script src="/bundle.js"></script

在package.json裏設置執行npm run dev 時自動打開頁面，設置端口號，設置內容的根路徑，熱更新（只更新了更改過的代碼，至關於補丁。同時能夠實現

 

 配置 dev-server 命令參數的第二種形式。webpack4.x不進行plugins配置也能夠成功

html-webpack-plugin插件配置啓動頁面

再次打包完成基本配置了。

本身再練習一遍的時候，最後打包出現錯誤,ERROR in   Error: Child compilation failed。跳轉到的頁面是錯誤信息，原來是index.html文件放的不對，應該放在src下。真是低級錯誤

 

配置處理CSS樣式表的第三方loader

webpack默認只能打包JS類型的處理文件，沒法處理其它非JS類型的文件，因此要安裝第三方loader

一、打包處理CSS文件，須要安裝cnpm i style-loader css-loader -D

cnpm i less-loader -D cnpm i less -D(這個是less-loader的內部依賴，不須要配置到webpack.config.js裏)

cnpm i sass-loader -D cnpm i node-sass -D(這個是sass-loader的內部依賴，不須要配置到webpack.config.js裏)

二、打開webpack.config.js配置文件，在裏面新增一個配置節點，叫作module，它是一個對象，在這個moudle對象上，有個rules屬性，

這個rules屬性是個數組，數組中存放了全部第三方文件支持的匹配和處理規則。

注意：webpack處理第三方文件類型的過程：

一、發現這個要處理的文件不是JS文件，而後就去配置文件中，查找有沒有對應的第三方 loader規則

二、若是能找到對應的規則，就會調用對應的 loader處理這種文件類型；

三、loader規則從右到左調用

四、當最後的一個loader 調用完畢，會把 處理的結果，直接交給 webpack 進行打包合併，最終輸出到bundle.js中去

 webpack中url-loader的使用

　　1.處理圖片

cnpm i url-loader file-loader -D(file-loader是uel-loader的內部依賴，不須要配置到webpack.config.js裏)

給定兩個值limit和name，設置文件名爲原來的文件名和後綴名

 

name=[name].[ext]這麼寫可能會形成同名文件覆蓋，name=[hash:8]-[name].[ext]　　

　　2.處理字體文件

注意：

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//正則表達式
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //圖片大小小於等於這個數，直接存url。大於這個會變成base64形式,
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=16094&name=[name].[ext]'},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//處理字體文件
        ]
    }

View Code

webpack中Bable的配置

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D

谷歌

總結：

1.新建項目文件

2.npm init -y     

　　結果：項目根目錄會多一個package.json文件 　

　　npm（node package manager）：nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）

3.npm install (或者是cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org )

　　結果： 項目中多出node_modules包

4.cnpm i webpack webpack-cli -D     安裝webpack webpack-cli

　　做用：打包工具

5.cnpm i webpack-dev-server

　　做用：爲webpack打包生成的資源文件提供web服務。webpack-dev-server 主要提供兩個功能：

• 爲靜態文件提供服務
• 自動刷新和熱替換(HMR)

　　配置：

　　　　方法一：直接在package.json配置scripts

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 6660 --contentBase src --hot"
  }

　　　　方法二：

　　　　　　1.在webpack.config.js裏配置devServer。

　　　　　　2.package.json配置scripts  dev

  "dev" :  "webpack-dev-server" ,

 

 1 const path = require('path');
 2 const webpack = require('webpack')
 3 const htmlWebpackPlugin = require('html-webpack-plugin')
 4 module.exports={
 5     entry:path.join(__dirname,'./src/main.js'),
 6     output:{
 7         path:path.resolve(__dirname,'./dist'),
 8         filename:'bundle.js'
 9     },
10     devServer:{//這是配置dev-server命令參數的第二種形式，相對麻煩點
11         //--open --port 6660 --contentBase src --hot
12         open:true,
13         port:6660,
14         contentBase:'src',
15         hot:true
16 
17     },
18     plugins:[//配置插件的節點
19          new webpack.HotModuleReplacementPlugin(),
20         new htmlWebpackPlugin({
21             template:path.join(__dirname,'./src/index.html'),
22             filename:'index.html'
23         })
24     ],
25 };

View Code

 

6.cnpm i html-webpack-plugin -D

　　做用：實現頁面或bundle.js內存託管功能

　　步驟：

　　　　1.在 webpack.config.js 中導入包

const   htmlWebpackPlugin   =   require ( 'html-webpack-plugin' )

　　　　2. plugins配置插件的節點

plugins: [ //配置插件的節點

          new   webpack . HotModuleReplacementPlugin (),

         new   htmlWebpackPlugin ({

             template:path . join ( __dirname , './src/index.html' ),

             filename: 'index.html'

        })

    ]