webpack-demo(4.29.6)

  1. 安裝NodeJS,cnpm
    NodeJS安裝不消說,直接下載安裝。
    cnpm是npm的國內鏡像,淘寶的。
    npm用法不在此說明。

    npm install cnpm -g
    
  2. 創建項目

    mkdir webpack-demo & cd webpack-demo
    npm init -y
    

    此操作創建webpack-demo目錄,進入並初始化一個node項目,在該目錄下生成package.json文件。
    第一個命令的-y選項表示快速初始化項目,不加的話要手動錄入項目名、描述等信息,這些信息都會寫到package.json裏。

  3. 安裝webpack

    cnpm install webpack webpack-cli webpack-dev-server --save-dev
    

    此操作在當前項目下安裝webpack、webpack-cli、webpack-dev-server,存放在node_modules文件夾下,並在package.json文件中新增devDependencies信息。

  4. 編寫業務代碼
    以下是來自網絡的一個例子:
    創建webpack-demo/dist/index.html

    <!-- index.html -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
      </head>
      <body>
        <div id='root'>
        </div>
        <script src="main.js"></script>
      </body>
    </html>
    

    創建webpack-demo/src/index.js

    //index.js 
    const greeter = require('./Greeter.js');
    document.querySelector("#root").appendChild(greeter());
    

    創建webpack-demo/src/index.js

    // Greeter.js
    module.exports = function() {
      var greet = document.createElement('div');
      greet.textContent = "Hi there and greetings!";
      return greet;
    };
    

    其中,src與dist目錄名,輸入文件index.js、輸出文件main.js是webpack默認的名字,當然,可以配置。
    在webpack-demo下使用webpack打包:

    webpack
    或
    webpack src/index.js -o dist/main.js
    

    由於使用了默認的目錄和文件名,所以使用webpack命令就可以打包,也可以手動指明輸入輸出文件。
    這樣打包的話,不管哪個命令在下面都會輸出一條警告信息。大體意思是沒有指定打包模式,默認使用了production模式。
    打包模式有三種可選:development、production、none,分別是開發、生產、無。
    development模式不對代碼進行壓縮,而是放在eval裏。
    production模式會對代碼進行壓縮。
    none模式基本只是將文件進行連接與閉包。
    指明模式,只要在命令最後加上–mode development即可

    webpack --mode development
    或
    webpack src/index.js -o dist/main.js --mode development
    
  5. 查看效果
    瀏覽器打開dist/index.html即可看到效果

  6. webpack-dev-server的使用
    在package.json的scripts裏新增dev與build屬性:

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack-dev-server --inline --hot --progress --content-base ./dist",
      "build": "webpack --mode production --progress"
    }
    

    webpack-dev-server將打包的輸出放在內存中而不是文件,並且集成了express容器,將以服務器的形式提供開發調試。
    inline選項爲整個頁面添加了"Live Reloading"功能,而hot選項開啓了"Hot Module Reloading"功能,能夠實現修改js代碼後不需要重新打包,且不需要刷新頁面就自動重載的功能。至於二者的區別,估計是inline重載的是整個頁面而hot能精確到某個具體模塊。我看前端一般用inline就夠了。
    另外,webpack本身也提供–watch選項以支持熱部署,但據說項目大了響應慢。
    pregress選項輸出打包過程。
    content-base選項指明服務的根目錄。
    配置完成之後,可以在webpack-demo目錄下使用npm命令運行腳本:

    npm run dev
    或
    npm run build
    

    默認地址:http://localhost:8080/

  7. webpack配置文件
    webpack有一堆的東西可以配置與預處理,這裏只是做個引入。
    新建webpack-demo/build/webpack.dev.conf.js

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

    修改package.json:

    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "dev": "webpack-dev-server --inline --progress --content-base ./dist --config build/webpack.dev.conf.js",
      "build": "webpack --mode production --progress --config build/webpack.dev.conf.js"
    }
    

    運行開發模式:

    npm run dev
    

    訪問:http://localhost:8080/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章