表達 esp 描述 pla 目錄 comm tle tin 用途

1、項目文件夾中創建各類型文件放置的文件夾，如：iTestingWeb文件夾下創建src dist文件夾，用途：src為源碼 dist為生成後的文件放置位置，然後在源碼文件夾中進一步按文件類型增加文件夾:css、js、images等文件夾

2、在src文件夾中創建一個入口index.html文件，vscode編譯器使用快捷鍵：!+Tab方式快速創建html頁面,並快捷創建一個測試代碼：

ul>li*10{這是第$個li}，實現10行測試數據快速生成

3、繼續在src中創建js的入口文件：main.js

4、由於會用到js文件，因此我們導入jquery：在終端中（項目文件夾）裏首先運行：npm init 來初始化生成一個package.json，該文件有以下幾個作用：

　　a、作為一個描述文件，來描述你的項目依賴了哪些包

　　b、允許使用“語義化”來指定項目依賴包的版本

　　c、更好的與其他開發者分享，便於重復使用

5、初始化npm後，開始安裝依賴包：jquery：npm i jquery,安裝成功後，項目文件會增加一個文件夾：node_modules來存放下來好的依賴包

6、不倡導直接在html中增加jquery的引入，因為會多一次請求，因此我們直接把jquery的引入封裝到main.js入口js文件中：import $ form ‘jquery‘ ，邏輯為：從node_modules裏到處jquery.js並賦值給前端用$來接收，以後的$就代表jquery。另：import 引入模式為es6的模塊引入方式。

7、因為通過import方式所以傳統的解析是不支持的，因此開始引入webpack，首先要安裝webpack：

運行`npm i webpack -g`全局安裝webpack，這樣就能在全局使用webpack的命令

8、安裝完後執行命令來實現webpack的打包：

webpack src/js/main.js dist/bundle.js. 該語句的意圖是：把源碼的main.js文件打包成支持所有兼容的bundle.js文件來供前端訪問.

9、基本的發布已經搞定，現在要簡化一下，不要每次輸入 src/js/main.js dist/bundle.js. 這樣的入口和出口地址部分，想直接輸入webpack就可以直接打包：項目根目錄中增加“webpack.config.js”配置文件,然後就可以執行簡易的打包命令：webpcak即可

//這個配置文件，其實就是一個js文件，通過Node中的模塊操作向外暴露一個配置對象，然後命令行通過webpack命令直接被執行
module.exports = {
    //配置文件中，需要手動指定入口和出口
    //入口
    entry: {
        //表示要使用的webpack打包哪個文件
        path: path.join(__dirname, ‘./src/main.js‘),
    },
    //出口
    output: {
        //指定打包好的文件輸出到哪個目錄裏
        path: path.join(__dirname, ‘./dist‘),

        //指定輸出文件的名稱
        filename: ‘bundle.js‘
    }
}

10、接下來繼續延伸：如果每次修改每次都在命令行中輸入webpack也是煩躁的，我們可以通過另一個工具來簡化：webpack-dev-server；註意：該工具安裝必須依賴本地項目要存在webpack，就是說即使已經安全的全局的webpack，也需要在項目本地再安裝一遍：npm i webpack -D ；安裝webpack-dev-server命令為：npm i webpack-dev-server -D，安裝完畢後，當直接在命令行執行webpack-dev-server命令的時候會出現錯誤，原因是因為webpack-dev-server不會全局，也不應該是全局，因此如果想支持這個工具，就需要在package.json配置文件中增加腳本快捷：scripts下增加：

{
  "name": "itestingweb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start2": "webpack-dev-server --open --port 3000  --contentBase src --hot",
    "start": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-command": "^0.4.1",
    "webpack-dev-server": "^3.1.5"
  }
}

這樣只要執行：npm run start就可以運行工具。後面的“--open”表示的是執行命令後直接打開瀏覽器，安裝完開發者環境後，如何才能實現修改後頁面自動更新？這就需要一個熱更新插件：

HotModuleReplacementPlugin 該對象的使用步驟為：1、webpack.config.js增加開發者服務配置（devServer）：

devServer: {
        //contentBase: ‘./dist‘,
        // 設置服務器訪問的基本目錄
        contentBase: path.resolve(__dirname, ‘dist‘), //最好設置成絕對路徑
        // 設置服務器的ip地址,可以是localhost
        host: ‘localhost‘,
        // 設置端口
        port: 8090,
        // 設置自動拉起瀏覽器
        open: true,
        // 設置熱更新
        hot: true
    }

2、webpack.config.js引入webpack對象（因為熱更方法在對象中）

const webpack = require(‘webpack‘); 3、插件配置中new一個熱更新對象 new webpack.HotModuleReplacementPlugin(), 這樣重新npm run start 就可以實現熱更新了，只要服務開著 就不需要每次再做其他動作了。只管調整項目代碼就好

11、目前我們可以知道bundle.js是根據webpack-dev-server這個工具將其放在了緩存中，那麽是否可以將html頁面也放進去？答案是肯定的，這就需要借助一個插件來實現：html-webpack-plugin ，安裝命令：npm i html-webpack-plugin -D,安裝好後，需要在webpack.config.js裏增加配置,先導入插件

const htmlWebpackplugin = require(‘html-webpack-plugin‘);

，再在plugins裏new出對象：

const path = require(‘path‘)
const htmlWebpackplugin = require(‘html-webpack-plugin‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
const webpack = require(‘webpack‘);

//這個配置文件，其實就是一個js文件，通過Node中的模塊操作向外暴露一個配置對象，然後命令行通過webpack命令直接被執行
module.exports = {
    //配置文件中，需要手動指定入口和出口
    //入口
    entry: {
        //表示要使用的webpack打包哪個文件
        path: path.join(__dirname, ‘./src/main.js‘),
    },
    //出口
    output: {
        //指定打包好的文件輸出到哪個目錄裏
        path: path.join(__dirname, ‘./dist‘),

        //指定輸出文件的名稱
        filename: ‘bundle.js‘
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        //new一個熱更新的模塊對象（步驟：1、devServer增加配置 2、引用webpack對象（const webpack = require(‘webpack‘) 3、插件數組中 new一個熱啟動對象 ））
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackplugin({
            title: ‘Output Management‘,
            template: path.join(__dirname,‘./src/index.html‘),
            filename:‘index.html‘
        })
    ],
    devServer: {
        //contentBase: ‘./dist‘,
        // 設置服務器訪問的基本目錄
        contentBase: path.resolve(__dirname, ‘dist‘), //最好設置成絕對路徑
        // 設置服務器的ip地址,可以是localhost
        host: ‘localhost‘,
        // 設置端口
        port: 8090,
        // 設置自動拉起瀏覽器
        open: true,
        // 設置熱更新
        hot: true
    },
    devtool: ‘inline-source-map‘,

    //用於配置所有的第三方模塊加載器
    module:{
        rules:[
            //配置處理.css文件的第三方loader規則
            {test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]},
        ]
    }
}

然後執行 npm run start就會自動將頁面放在緩存裏了，當使用了html-webpack-plugin這個插件後，就不再需要我們再手動處理js的引用了，因為這個插件已經幫我們創建了一個合適的script，並且引用了正確的訪問路徑，此時在html頁面我們會看到：

<script type="text/javascript" src="bundle.js"></script>

這行代碼。

12、此時基本的頁面已經出來了，那麽我們如何增加樣式資源呢？

　　這就需要增加樣式文件及其引用來處理：在css文件夾裏增加一個index.css文件，比如要刪除每行記錄前面的點：

li{
    list-style: none;
}

然後在入口js裏增加css的資源引用：import ‘./css/index.css‘，此時我們支持npm run start會出現錯誤，那是因為我們缺少兩個工具：‘style-loader‘,‘css-loader‘，如何增加：

1、先npm i style-loader -D; npm i css-loader -D

2、再在webpack.config.js裏增加配置：

//用於配置所有的第三方模塊加載器
    module:{
        rules:[
            //配置處理.css文件的第三方loader規則
            {test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]},
        ]
    }
}

註意：此配置中test後面的處理是依據正則表達式來進行.css文件識別的，並且：在工具加載的時候步驟是先css-loader再style-loader的從右向左的順序執行工具加載。當加載完style-loader後，再將加載後的工具加載到webpack中用來打到調用。

13、

//在項目下，運行下列命令行
npm install --save-dev sass-loader
//因為sass-loader依賴於node-sass，所以還要安裝node-sass
npm install --save-dev node-sass

webpack創建頁面的過程