01-webpack的安裝與初步使用

hello你們好，本節主要是介紹webpack的安裝與初步使用。

1. 初始化

   1. 首先新建一個文件夾learnWebapck，這個文件夾做爲咱們學習webpack的項目文件。
   2. 在文件夾內運行npm init -y來初始化文件內容，運行npm install webpack webpack-cli -D來局部安裝webpack和webpack-cli，不建議全局安裝webpack，由於容易形成衝突。
   3. 安裝完畢以後運行npx webpack --version 和npx webpack-cli --version來測試是否安裝成功，當輸出對應的版本信息的時候就表明已經安裝成功了。

      

2. 第一次打包

   1. 接下來新建一個文件夾src,在src裏新建index.js，寫入代碼console.log('表弟');
   2. 而後經過命令行使用webpack來打包這個index.js文件。運行命令行npx webpack './src/index.js'能夠看到webpack將index.js打包到了dist文件夾下的main.js，這個dist文件夾是webpack默認的打包路徑，若是此文件夾不存在，webpack會本身建立一個。
   3. 另外咱們也看到了有黃色的警告，說咱們沒有手動配置webpack參數，它默認使用了production模式打包，咱們先無論這個警告。

      

4.  看一下main.js，能夠發現webpack將咱們的源碼作了包裝，這個就是打包後的代碼

    ![圖片.png](https://upload-images.jianshu.io/upload_images/1934919-39ffb22aaf39967a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1. 在html頁面上顯示

   1. 接下來在dist文件夾裏建立一個index.html而且引入main.js，
   2. 在瀏覽器裏打開index.html，檢查頁面輸出會發現表弟兩個字。
   3. 到目前爲止一個最最最最簡單的示例就已經完成。

      

2. 提高難度

   1. 那麼咱們來稍微提升一下難度，安裝一個很是流行的包loadsh,npm install loadsh -D。安裝完畢以後用loadsh來寫一些稍微複雜的代碼

      import _ from 'loadsh';
      
       function component() {
           var div = document.createElement('div');
           div.innerHTML = _.join(['你好','表弟']);
           return div;
       }
      
       var el = component();
       document.body.appendChild(el);

      這幾行代碼的意思是在建立一個div，寫入你好表弟，最後把div放到頁面上，好了讓咱們來運行一下看看吧

      npx webpack './src/index.js'

      運行完畢刷新瀏覽器查看頁面已經輸出了你好表弟

5.使用配置

到目前爲止咱們仍是在零配置的狀況下進行打包的，雖然在 webpack v4 中，能夠無須進行任何配置便可使用，然而大多數項目仍然會須要很複雜的設置，若是每次修改配置都要在命令行裏手動輸入的話，那簡直太折磨人了。因此下面讓咱們建立一個配置文件webpack.config.js

1. 設置入口文件和輸出目錄

const path = require('path'); 
    module.exports = { entry: './src/index.js', 
    output: { 
          filename: 'main.js', 
          path: path.resolve(__dirname, 'dist') 
        }     
     };

這段代碼的意思是，entry表明的是webpack打包的入口文件，也就是說從這個文件開始打包，output裏配置的輸出文件，輸出文件的名稱的main.js，輸出路徑是dist文件夾，path.resolve的意思是將相對路徑轉成絕對路徑

1. 而後使用配置文件來打包代碼，運行npx webpack --config webpack.config.js

--config webpack.config.js這個意思就是咱們要使用的配置文件是webpack.config.js

好的開始執行，ok運行完畢，刷新瀏覽器查看頁面發現一切正常

1. 配置npm script

npm script你能夠理解一個快捷方式，能夠簡便的運行你預先設置好的命令行。打開package.json文件,在scripts內寫入

"build":"webpack --config webpack.config.js"

而後在命令行裏運行npm run build便可運行對應的命令了。