webpack使用

1、什麼是以及爲何要使用webpack

　　如今的網頁功能愈來愈豐富，所須要的JavaScript和模塊也會不少，爲開發更加簡潔，出現瞭如下方法，如模塊化，scss，typescript等。
但有些語法是瀏覽器沒法識別的。因此須要用到webpack。
　　WebPack是模塊打包器，它會將瀏覽器不能支持不能識別的語言語法，打包轉換成瀏覽器可識別的語法，如（Scss，TypeScript等）。

2、webpack 與 gulp 的區別

二者並沒有太多的可比性
一、webpack是爲模塊化提供解決方案；
二、gulp是前端自動化構建工具。

3、如何使用webpack

注：此例以webpack@3.5.3版本爲例
另，熱更新 服務器webpack-dev-server@2 依託以上版本

實例：

一、全局安裝webpack

cnpm install webpack@3.5.3 -g
或
npm install webpack@3.5.3 -g

二、新建一個文件夾，並初始化文件

npm init -y

　　以後，文件夾內會出現一個package.json 的文件

三、局部安裝webpack

cnpm install webpack@3.5.3 --save-dev

　　以後，文件夾會出現一個node_modules 的文件

 

四、新建webpack.config.js文件夾

五、建立 src 和dist 文件夾

 

六、src入口文件中新建index.js文件（書寫須要的內容）如：

　　

console.log(222)

 

七、配置webpack.config.js文件（配置基礎部分）

// 引入核心模塊
const path = require('path');

// __dirname:當前文件夾的絕對路徑
// path.join:鏈接兩個參數，生成新的路徑
const PATH = {
    app:path.join(__dirname,'./src/index.js'),
    build:path.join(__dirname,'./dist')
}

// 測試，用node webpack.config.js 運行
// console.log(PATH.app)

// webpack配置項
module.exports = {
    entry:{
        // 入口路徑，app名字決定下面出口文件的名字
        app:PATH.app
    },
    output:{
        filename:"[name].js",   //生成的出口文件名字爲app.js
        path:PATH.build
    }
}

　cmd命令中，運行打包命令：

webpack

八、在dist中會生成一個app.js文件，內容以下

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {

console.log(222)

/***/ })
/******/ ]);

 

恭喜！至此，一次簡單的打包完成！

但須要注意，以上打包方式僅適合4.0版本如下。4.0以上會有簡單的變化。

---

 

九、當瀏覽器遇到不能識別的代碼時，須要用到loader

　　提早安裝loader，在代碼中解釋

處理css的loader

               cnpm install --save-dev style-loader css-loader  sass-loader node-sass

處理js的loader

                cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

 

配置以下：

// 引入核心模塊
const path = require('path');

// __dirname:當前文件夾的絕對路徑
// path.join:鏈接兩個參數，生成新的路徑
const PATH = {
    app:path.join(__dirname,'./src/index.js'),
    build:path.join(__dirname,'./dist')
}

// 測試，用node webpack.config.js 運行
// console.log(PATH.app)

// webpack配置項
module.exports = {
    entry:{
        // 入口路徑，app名字決定下面出口文件的名字
        app:PATH.app
    },
    output:{
        filename:"[name].js",   //生成的出口文件名字爲app.js
        path:PATH.build
    },
    // 需提早配置好，解決瀏覽器不能識別的語法
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/env','@babel/react']
                    }
                }
            },
            {
                test:/\.(css|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

 

　　

　　cmd命令中，運行打包命令：

webpack

 

　　在dist 下新建一個index.html 文件，並引入app.js,便可實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="./app.js"></script>

 

如今，便可完成對不識別代碼的識別，如ES6轉爲ES5等

---

 

 

以上爲手動添加index,html文件

生成html模板（cmd命令）

插件
                cnpm install html-webpack-plugin --save-dev

webp新加plugins 配置

// 引入核心模塊
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

// __dirname:當前文件夾的絕對路徑
// path.join:鏈接兩個參數，生成新的路徑
const PATH = {
    app:path.join(__dirname,'./src/index.js'),
    build:path.join(__dirname,'./dist')
}

// 測試，用node webpack.config.js 運行
// console.log(PATH.app)

// webpack配置項
module.exports = {
    entry:{
        // 入口路徑，app名字決定下面出口文件的名字
        app:PATH.app
    },
    output:{
        filename:"[name].js",   //生成的出口文件名字爲app.js
        path:PATH.build
    },
    // 需提早配置好，解決瀏覽器不能識別的語法
    module:{
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/env','@babel/react']
                    }
                }
            },
            { 
                test:/\.(css|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    },
    // 插件在plugins中使用 plugins:[ // HtmlWebpackPlugin 爲構造函數 new HtmlWebpackPlugin({ // 生成的文件名稱 filename:'index.html', // 模板文件 template:'./index.html', }) ]
}

 

十、減小每次手動運行webpack，須要用熱更新

cnpm install webpack-dev-server@2 --save-dev

在package.json 的 script中添加

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

而後，cmd中運行

npm run dev

便可完成實時更新。。。。

注src 下的index.js 可導入其餘文件，如：body.css，

　　index.js：

import * as obj from './modeleW'

import './body.css'

console.log(222)
console.log(obj.name)
console.log(obj.age)
console.log(obj.sign)

　　body.css：

body{
    background: red;
}

手敲不易，肩膀疼，，，，，