React學習筆記-webpack基本配置

準備工做

首先要確保你的電腦安裝了node.js；安裝完成後打開命令行窗口運行命令 node -v 能夠查看版本號證實安裝成功。

這時說明Nodejs下的包管理器 npm 也安裝成功。因爲使用npm安裝模塊是從國外服務器下載，受網絡影響較大，可能下載較慢或者出現丟包等狀況，推薦使用淘寶鏡像來安裝模塊 運行 npm install -g cnpm --registry=https://registry.npm.taobao.org 來全局安裝 cnpm。

建立項目

• 運行 cnpm init -y 初始化項目
• 在項目根目錄下新建 dist 和 src 文件夾 而後在src目錄下新建一個 index.html 和 index.js 文件 在 webpack4.X 中有一個很大的特性，就是約定大於配置，默認的打包入口路徑是 src/index.js 文件， 打包的輸出文件是dist/main.js。（固然若是想要修改默認的打包入口文件的路徑的話能夠在 webpack.config.js文件中 配置 entry:'url', //入口文件）
• 運行 cnpm i webpack -D cnpm run webpack-cli -D 安裝 webpack
• 打開咱們的 package.json 文件看到圖中代碼說明安裝成功

  

• 在咱們項目根目錄下新建一個 webpack.config.js webpack 在執行時，除在命令行傳入參數，還能夠經過指定的配置文件來執行。默認會搜索當前目錄下webpack.config.js。這個文件是一個node.js模塊，返回一個json格式的配置對象。

//webpack 默認只能打包處理 .js 後綴明的類型的文件 好比.vue和.png 沒法主動處理，因此要配置第三方loader 
//向外暴露一個打包的配置對象 ；由於webpack 是基於node 構建的因此webpack 支持全部的node api 和語法
module.exports = {
   mode:'production',  
   //development 開發環境 未壓縮
   //production 生產環境 壓縮

   module:{  // 全部第三方模塊的匹配規則
       rules:[  // 第三方匹配的規則 use 表明loader 一個能夠寫成字符串，多個用數組 注意 exclude 排除 node_modules 不然項目沒法運行
           {test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
       ]
   }
}

複製代碼

• 此時每次運行咱們的項目的時候都須要在終端手動輸入 webpack 來啓動項目，而且此時在咱們的 index.html 文件中須要手動引入咱們 dist 文件夾下面的 main.js <script src="../dist/main.js"></script> 很是不便於咱們的開發
• 運行 cnpm i webpack-dev-servver -D 安裝實時熱更新插件 打開 package.json 文件看到 webpack-dev-server": "^3.8.0 說明安裝成功

//webpack-dev-server 打包好的 main.js 是託管到內存中，並不存在於咱們的物理磁盤中，大大的提升了性能
//可是，這個main.js 是存在於咱們的項目根目錄中，能夠直接引用
//<script src="/main.js"></script>
複製代碼

• 打開 package.json 文件下面的 "scripts" 配置 dev

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  //--open 自動打開瀏覽器  後面能夠加瀏覽器名稱
  //--port 3000 端口號
  //--host 127.0.0.1 指定域名
複製代碼

• 咱們還能夠運行 cnpm i html-webpack-plugin -D 在內存中啓動生成index 頁面的插件 提升性能,安裝成功後打開咱們的 webpack.config.js 文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //導入在內存中自動生成index 頁面的插件

//建立一個插件的實例對象
//path.join()的做用是用於鏈接路徑。該方法的主要用途在於，會正確使用當前系統的路徑分隔符，Unix系統是"/"，Windows系統是"\"。 
//__dirname 老是指向被執行 js 文件的絕對路徑

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html'),   //源文件
    filename: 'index.html'  //生成的內存中首頁的名稱
})

//根據template 路徑下的首頁 生成內存中 的一個index的首頁
//使用這個插件以後 能夠把index.html中手動引入的main.js註釋

module.exports = {
    mode:'production',  
    //development 開發環境 未壓縮
    //production 生產環境 壓縮

    plugins:[   //注入咱們配置好的插件
        htmlPlugin
    ],
    module:{  // 全部第三方模塊的匹配規則
        rules:[  // 第三方匹配的規則 use 表明loader 一個能夠寫成字符串，多個用數組 注意 exclude 排除 node_modules 不然項目沒法運行
            {test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
        ]
    }
}
複製代碼

結尾

關於安裝時 -D -S 的區別
複製代碼

-S ：是 --save 的縮寫對生產環境所需依賴的聲明(開發應用中使用的框架，庫) 好比：jq，react，vue都須要放到這裏面 。 會存放到」dependencies」

-D ：是 --save-dev 的縮寫對開發環境所需依賴的聲明(構建工具，測試工具) 好比：babel，webpack，都放到當前目錄。 會存放到」devDependencies」。