webpack-dev-server基本使用

1. 使用webpack-dev-server這個工具自動打包編譯,運(yùn)行npm i webpack -dev-server -D把這個工具安裝到項(xiàng)目的本地開發(fā)依賴中去,安裝完畢后這個工具的用法和webpack命令的用法完全一樣
2. 由于webpack -dev-server是本地安裝的，所以無法當(dāng)作腳本命令在終端中直接運(yùn)行（只有安裝到全局-g的工具才能在終端中正常執(zhí)行
3. 在package.json中的"scripts":加入代碼

"dev": "webpack-dev-server"

4. npm run dev運(yùn)行webpack-dev-server
5. webpack -dev-server這個工具如果想要正常運(yùn)行，要求在本地項(xiàng)目中安裝webpack
6. 將頁面URL地址改為http://localhost:8080/src/可以看到項(xiàng)目的根目錄
7. 將導(dǎo)入的js包從根目錄引入（將原來的本地文件刪除也是會有樣式）,瀏覽器會自動刷新樣式，保持與更改的實(shí)時一致

<script src="/bundle.js"></script>

8. webpack-dev-server幫我們打包生成的bundle.js 文件并沒有存放到實(shí)際的物理磁盤上，而是直接托管到了電腦的內(nèi)存中，所以項(xiàng)目根目錄中找不到這個打包好的bundle.js,可以認(rèn)為webpack-dev-server把打包好的文件以一種虛擬的形式托管到了項(xiàng)目的根目錄中

webpack -dev-server的常用命令參數(shù)

1. --open自動打開瀏覽器（不用手動點(diǎn)擊終端中出現(xiàn)的鏈接http://localhost:8080/）（在package.json中操作）

"dev": "webpack-dev-server --open",

2. --port設(shè)置端口

"dev": "webpack-dev-server --open --port 3000",

3. --contentBase設(shè)置默認(rèn)打開路徑，設(shè)置直接打開src 可以直接展示index界面

"dev": "webpack-dev-server --open --port 3000 --contentBase src",

4. --hot熱更新

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",

5. 配置devServer第二種方式

const path=require('path')
const webpack=require('webpack')//啟用熱更新 第二步
module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
     path:path.join(__dirname,'./dist'),
    filename:'bundle.js'},
    devServer:{
        open:true,//自動打開瀏覽器
        port:3000,//設(shè)置啟動端口
        contentBase:'src',//指定托管的根目錄
        hot:true,//啟用熱更新 第一步

    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//new 一個熱更新的模塊對象，啟用熱更新 第三步

    ]
}

html-webpack-plugin

1. 下載html-webpack-plugin插件

npm i html-webpack-plugin -D

2. 導(dǎo)入內(nèi)存中生成的HTML頁面的插件

const htmlWebpackPlugin=require('htmlWebpackPlugin')

3. new htmlWebpackPlugin 創(chuàng)建一個內(nèi)存中生成的HTML插件
4. template 指定 模板頁面 將來會根據(jù)指定的頁面路徑去生成內(nèi)存中的頁面
5. filename 指定生成頁面的名稱

 plugins: [
    new webpack.HotModuleReplacementPlugin(),//new 一個熱更新的模塊對象，啟用熱更新 第三步
    new htmlWebpackPlugin({
        template: path.join(__dirname,'./src/index.html'),
        filename:'index.html'
    })
]

6. 當(dāng)使用html-webpack-plugin之后，不需要手動處理bundle.js的引用路徑，這個插件已經(jīng)自動創(chuàng)建一個合適的script標(biāo)簽，并且引用正確的路徑

loader

1. 使用import導(dǎo)入css樣式表（在main.js中）

import './css/index.css'

2. webpack默認(rèn)只能打包處理js類型的文件，無法處理非js文件,如果要處理非js文件，要手動安裝一些合適的第三方loader加載器
3. 如果要處理css文件需要安裝loader

npm i style-loader css-loader –D

4. 打開webpack.config.js配置文件，在里面新增一個配置節(jié)點(diǎn)，叫module(用于配置所有第三方模塊加載器) 他是一個對象，在這個對象上有一個rules屬性，存放了所有第三方文件匹配和處理規(guī)則
5. 配置處理.css文件的loader規(guī)則

module: {
    rules: [
        {text:/\.css$/,use:['style-loader','css-loader']},
    ]
}