webpack4.x基本配置

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

  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查看當前版本號。html

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

 

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

 

 

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

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

出入口文件配置

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

接下來設置項目熱部署,使用webpack-dev-server實現自動打包編譯功能正則表達式

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

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

本地安裝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'
        })
    ]
相關文章
相關標籤/搜索