webpack的一般使用方法

一菇绵、Webpack簡(jiǎn)介

1. 核心

① 入口(entry)
② 輸出(output)
③ loader
④ 插件(plugins)

2. 優(yōu)勢(shì)

① 模塊化開(kāi)發(fā)(import,require)
② 預(yù)處理(Less商模,Sass帆疟,ES6轻要,TypeScript……)
③ 主流框架腳手架支持(Vue,React旱爆,Angular)
④ 龐大的社區(qū)(資源豐富舀射,降低學(xué)習(xí)成本)

詳情請(qǐng)戳→我為什么要使用Webpack?

3. 初學(xué)者誤區(qū)

① 要學(xué)會(huì)node.js
② 只能用于簡(jiǎn)單的代碼壓縮合并
③ 上線(xiàn)時(shí)要將整個(gè)項(xiàng)目文件上傳服務(wù)器

以上幾條都是初學(xué)者比較容易產(chǎn)生的誤區(qū),而事實(shí)上……

① 我們確實(shí)需要安裝node.js怀伦,但基本只是需要它提供的環(huán)境及npm而已脆烟,你不一定要掌握node.js語(yǔ)法
② Webpack非常強(qiáng)大,不僅僅可以實(shí)現(xiàn)代碼的壓縮合并房待,還能進(jìn)行一些預(yù)編譯處理以及模塊化開(kāi)發(fā)等
③ 我們只需要將Webpack打包出來(lái)的文件目錄上傳到服務(wù)器即可邢羔,而不是上傳整個(gè)項(xiàng)目文件

二、準(zhǔn)備工作

1. 安裝node.js

2. 新建項(xiàng)目

① 創(chuàng)建目錄結(jié)構(gòu)

在新創(chuàng)建的項(xiàng)目文件夾下桑孩,創(chuàng)建兩個(gè)基礎(chǔ)文件夾:srcdist拜鹤,其中src是我們開(kāi)發(fā)時(shí)源代碼所放置的文件夾,dist是我們使用Webpack打包后代碼輸出的目標(biāo)文件夾流椒,也就是說(shuō)最終我們上傳服務(wù)器的代碼都是從dist文件夾下獲取敏簿。目錄結(jié)構(gòu)大致如下:

image

② 新建一個(gè)package.json文件

package.json文件是在node.js環(huán)境下開(kāi)發(fā)項(xiàng)目必須要使用到的文件,該文件主要用于配置項(xiàng)目入口宣虾、腳本和項(xiàng)目所需安裝的依賴(lài)等等惯裕。我們可以自己手動(dòng)創(chuàng)建,也可以通過(guò)命令行自動(dòng)創(chuàng)建它绣硝。命令行創(chuàng)建很簡(jiǎn)單蜻势,直接在控制臺(tái)終端輸入npm init,然后一直回車(chē)即可輕松創(chuàng)建一個(gè)最基礎(chǔ)的package.json文件鹉胖。

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

小貼士: 建議使用開(kāi)發(fā)工具中自帶的控制臺(tái)終端握玛,非常方便,自動(dòng)定位當(dāng)前項(xiàng)目文件夾甫菠,無(wú)需手動(dòng)切換败许。比如我使用的開(kāi)發(fā)工具是WebStorm,控制臺(tái)終端如下圖:

image

3. 安裝Webpack

依次輸入命令行npm i -D webpacknpm i -D webpack-cli回車(chē)進(jìn)行本地安裝淑蔚,其中iinstall的縮寫(xiě),-D--save-dev的縮寫(xiě)愕撰,也就是說(shuō)這兩個(gè)命令行也可以寫(xiě)成npm install --save-dev webpacknpm install --save-dev webpack-cli刹衫。

安裝后的目錄結(jié)構(gòu)如下:

image

package.json文件如下:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

4. 新建webpack.config.js文件

該文件是Webpack的配置文件醋寝,也是項(xiàng)目運(yùn)行的入口文件,基礎(chǔ)寫(xiě)法如下:

module.exports = {
    entry: './src/scripts/index.js',    // 需要被打包的js文件路徑及文件名
    output: {
        path: __dirname + '/dist',    // 打包輸出的目標(biāo)文件的絕對(duì)路徑(其中__dirname為當(dāng)前目錄的絕對(duì)路徑)
        filename: 'scripts/index.js'   // 打包輸出的js文件名及相對(duì)于dist目錄所在路徑
    }
};

三带迟、開(kāi)始打包

1. 新建需要被打包的js文件

image

我們給這個(gè)index.js文件寫(xiě)入點(diǎn)代碼:

//index.js
alert('Hello Webpack!');

2. 開(kāi)始打包

輸入命令行:npx webpack音羞,回車(chē)。

由于我們已經(jīng)在webpack.config.js文件配置了打包的相關(guān)路徑及文件名仓犬,所以最終打包后我們就可以在dist目錄下看到我們想要的輸出結(jié)果嗅绰,打包后整體目錄結(jié)構(gòu)如下:

image

3. 使用打包后的js代碼

現(xiàn)在我們已經(jīng)獲得打包后的代碼,接下來(lái)我們應(yīng)該使用它搀继,測(cè)試它是否能正常運(yùn)行窘面。

我們可以在dist目錄下手動(dòng)創(chuàng)建一個(gè)HTML文件,并引入這個(gè)已經(jīng)打包成功的js文件叽躯。目錄結(jié)構(gòu)及HTML代碼如下:

image
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="scripts/index.js"></script>
</body>
</html>

打開(kāi)這個(gè)index.html頁(yè)面后财边,我們發(fā)現(xiàn)瀏覽器彈出“Hello Webpack!”提示框,說(shuō)明代碼確實(shí)已經(jīng)打包成功点骑。

本文重點(diǎn)總結(jié):

成功運(yùn)行Webpack基本流程如下:
① 安裝node.js
② 創(chuàng)建項(xiàng)目目錄和新建package.json
③ 安裝webpack和webpack-cli
④ 新建webpack.config.js
⑤ 開(kāi)始打包你的js代碼

<meta charset="utf-8">

二酣难,打包c(diǎn)ss:

上一節(jié)講到如何使用Webpack實(shí)現(xiàn)最基礎(chǔ)的打包功能,但是發(fā)現(xiàn)以下幾個(gè)比較突出的問(wèn)題:

① 我們只打包了一個(gè)JS文件黑滴,多個(gè)文件該如何打包憨募?
② CSS樣式該如何打包?
③ 每次寫(xiě)完代碼想要看運(yùn)行結(jié)果都需要手動(dòng)輸命令打包袁辈,反而降低了開(kāi)發(fā)效率

沒(méi)關(guān)系菜谣,本文就是為解決這些問(wèn)題而來(lái)的。繼續(xù)上節(jié)實(shí)例吵瞻,開(kāi)始吧葛菇!

一、JS模塊化

使用Webpack成功打包多個(gè)JS文件最核心的一點(diǎn)就是使用模塊化的開(kāi)發(fā)方式橡羞,而Webpack支持CommonJS和ES6兩種模塊化規(guī)范眯停,其中有關(guān)CommonJS的語(yǔ)法可以看我之前的一篇文章→JavaScript模塊化編程規(guī)范。本文也將以CommonJS規(guī)范來(lái)講解Webpack中的JS模塊化卿泽。

我們?cè)趕cripts目錄下添加一個(gè)module.js文件莺债,目錄結(jié)構(gòu)如下:

image

并寫(xiě)入以下代碼:

// module.js
var text = 'Hello Webpack!';

module.exports = {   // CommonJS規(guī)范中模塊輸出語(yǔ)法
    text: text
};

然后在index.js中引入module.js文件:

// index.js
var module = require('./module.js');   // CommonJS規(guī)范中模塊引入語(yǔ)法

alert(module.text);   // 打包后同樣輸出“Hello Webpack!”

由于我們?cè)谏弦还?jié)中已經(jīng)對(duì)Webpack的打包入口和輸出路徑進(jìn)行了基本配置,所以我們只需同樣執(zhí)行npx webpack命令即可將兩個(gè)JS文件進(jìn)行打包輸出到dist目錄签夭。

小貼士: 有時(shí)輸入的命令比較長(zhǎng)齐邦,我們可以將其寫(xiě)入package.json文件的"scripts"屬性中。

改寫(xiě)后的package.json如下:

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"   
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

接著我們只需執(zhí)行npm run start命令即可(或直接輸入npm start)第租。

二措拇、打包CSS樣式

1. loader簡(jiǎn)介

由于Webpack打包入口目前只配置了一個(gè)index.js文件,那么其他需要被打包的文件都必須通過(guò)模塊化方式引入該文件才行慎宾,而默認(rèn)情況下丐吓,引入的文件必須是js文件(如上面添加的module.js)浅悉。

那么其他文件類(lèi)型該如何進(jìn)行打包呢?

這時(shí)我們就要用到Webpack中所提供的各種loader券犁,它就是專(zhuān)門(mén)用于處理除JS文件之外的其他格式文件的編譯术健、提取、合并粘衬、打包等工作的荞估。

其中CSS文件的打包需要用到css-loaderstyle-loader兩個(gè)loader,css-loader只是用于加載css文件(并沒(méi)有添加到頁(yè)面)稚新,而style-loader則是將打包后的css代碼以<style>標(biāo)簽形式添加到頁(yè)面頭部勘伺。

2. 安裝loader

輸入命令npm i -D css-loader style-loader同時(shí)安裝這兩個(gè)loader,安裝結(jié)束后再在webpack.config.js文件中配置相應(yīng)的loader枷莉,具體配置如下:

// webpack.config.js
module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {   
        path: __dirname + '/dist',   // 輸出路徑
        filename: 'scripts/index.js'    //  輸出文件名
    },
    module: {
        rules: [  
            {
                test: /\.css$/,   // 正則表達(dá)式娇昙,表示.css后綴的文件
                use: ['style-loader','css-loader']   // 針對(duì)css文件使用的loader,注意有先后順序笤妙,數(shù)組項(xiàng)越靠后越先執(zhí)行
            }
        ]
    }
};

3. 開(kāi)始打包

在css目錄下新建一個(gè)style.css文件冒掌,并寫(xiě)入樣式:

/* style.css */
html{ background: #f00;}

然后在index.js中引入該文件:

// index.js
var module = require('./module.js');
require('../css/style.css');   // 引入css樣式

alert(module.text);

最后輸入命令npm start,打包完成后打開(kāi)index.html頁(yè)面后蹲盘,你會(huì)發(fā)現(xiàn)除了彈出之前的“Hello Webpack!”外股毫,頁(yè)面背景顏色也變?yōu)榧t色,說(shuō)明樣式也已經(jīng)打包成功召衔。

三铃诬、自動(dòng)化打包

通過(guò)上面的講解你會(huì)發(fā)現(xiàn),雖然我們已經(jīng)將命令改成了npm start苍凛,然而實(shí)際操作上還是得每次手動(dòng)輸入命令打包趣席,不開(kāi)心。

我們能不能像以前不用Webpack時(shí)那樣醇蝴,寫(xiě)完了直接刷新頁(yè)面就能看到效果呢宣肚?

答案當(dāng)然是可以的,我們只需在webpack.config.js中添加watch: true就好悠栓。

module.exports = {
    entry: './src/scripts/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'scripts/index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    },
    watch: true   // 監(jiān)聽(tīng)修改自動(dòng)打包
};

本文重點(diǎn)總結(jié)

① 打包多個(gè)文件為一個(gè)文件霉涨,必須使用模塊化開(kāi)發(fā)方式
② 先后使用css-loader和style-loader可以打包CSS樣式并添加至頁(yè)面
③ 想要自動(dòng)化打包,只需在webpack.config.js文件中添加watch: true

打包圖片

上一節(jié)我們講到如何使用css-loaderstyle-loader兩個(gè)loader來(lái)打包CSS代碼惭适,這次我將繼續(xù)講解如何使用loader將圖片類(lèi)型文件進(jìn)行打包處理笙瑟。

一、上節(jié)回顧

為了讓大家思路更加明朗癞志,我還是先將上一節(jié)結(jié)束時(shí)的目錄結(jié)構(gòu)和一些關(guān)鍵文件內(nèi)容展示一下吧往枷。

image

webpack.config.js:

module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {
        path: __dirname + '/dist',    // 輸出路徑
        filename: 'scripts/index.js'     // 輸出文件名
    },
    module: {
        rules: [    // 其中包含各種loader的使用規(guī)則
            {
                test: /\.css$/,  // 正則表達(dá)式,表示打包.css后綴的文件
                use: ['style-loader','css-loader']   // 針對(duì)css文件使用的loader,注意有先后順序错洁,數(shù)組項(xiàng)越靠后越先執(zhí)行
            }
        ]
    },
    watch: true    // 監(jiān)聽(tīng)文件改動(dòng)并自動(dòng)打包
};

index.js:

var module = require('./module.js');
require('../css/style.css');

二茅信、圖片打包

圖片打包關(guān)鍵要用到file-loaderurl-loader,其中url-loaderfile-loader功能基本一致墓臭,只不過(guò)url-loader能將小于某個(gè)大小的圖片進(jìn)行base64格式的轉(zhuǎn)化處理。

1. CSS中的圖片

比如妖谴,我現(xiàn)在在src目錄下新增一個(gè)images文件夾窿锉,再在images中添加一張圖片“1.jpg”。然后我在style.css中添加以下代碼:

html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}

如果這時(shí)直接進(jìn)行打包膝舅,那么肯定會(huì)報(bào)錯(cuò)嗡载,比如像這樣的:

image

第三行它提示你需要使用一個(gè)loader來(lái)處理圖片這種類(lèi)型的文件,這時(shí)仍稀,我們只需把file-loader裝上洼滚,并在webpack.config.js中添加相應(yīng)配置就ok了。

① 輸入命令安裝file-loader

npm i -D file-loader

② 在webpack.config.js中的rules數(shù)組中添加file-loader的相關(guān)配置

{
    test: /\.(png|jpg|gif|svg)$/,
    use: ['file-loader']
}

其實(shí)對(duì)于只有單個(gè)loader的技潘,我們還可以將其簡(jiǎn)化成下面這樣:

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader'
}

接下來(lái)遥巴,我們只需執(zhí)行npm start命令進(jìn)行打包即可。

雖然我們已經(jīng)將圖片但是打包后享幽,我們會(huì)發(fā)現(xiàn)打包后的圖片名發(fā)生了變化:

image

那么如何才能保持圖片名不變铲掐,而且也能夠添加到指定目錄下呢?

我們只需要再添加一個(gè)options屬性即可:

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: 'images/[name].[ext]'
    }
}

其中name屬性其實(shí)就是圖片打包后的路徑值桩,其中包括圖片名([name])圖片格式([ext])摆霉。

此時(shí)打包后的dist目錄結(jié)構(gòu)如下:

image

2. JS中的圖片

file-loader能自動(dòng)識(shí)別CSS代碼中的圖片路徑并將其打包至指定目錄,但是JS就不同了奔坟,我們來(lái)看下面的例子携栋。

// index.js
var img = new Image();
img.src = '../images/1.jpg';
document.body.appendChild(img);

如果不使用Webpack打包,正常情況下只要路徑正確圖片是能夠正常顯示的咳秉。然而婉支,當(dāng)使用Webpack打包后,我們會(huì)發(fā)現(xiàn)圖片并未被成功打包到dist目錄滴某,自然圖片也無(wú)法顯示出來(lái)磅摹。

這其實(shí)是因?yàn)閃ebpack并不知道'../images/1.jpg'是一張圖片,如果要正常打包的話(huà)需要先將圖片資源加載進(jìn)來(lái)霎奢,然后再將其作為圖片路徑添加至圖片對(duì)象户誓。具體代碼如下:

// index.js
var imgSrc = require('../images/1.jpg');

var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

3. 淺談url-loader

除了使用file-loader對(duì)圖片進(jìn)行打包處理外,我們同樣也可以使用url-loader代替幕侠,另外我們還可以對(duì)小于某個(gè)大小的圖片進(jìn)行base64格式的轉(zhuǎn)化處理帝美。

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        name: './images/[name].[ext]',
        limit: 8192
    }
}

這里limit屬性的作用就是將小于8192B(8.192K)大小的圖片轉(zhuǎn)成base64格式,而大于這個(gè)大小的圖片將會(huì)以file-loader的方式進(jìn)行打包處理晤硕,例如:

image

當(dāng)然悼潭,如果不寫(xiě)limit屬性庇忌,那么url-loader就會(huì)默認(rèn)將所有圖片轉(zhuǎn)成base64。

小貼士: 當(dāng)我們配置watch為true進(jìn)行打包后舰褪,Webpack會(huì)一直處于監(jiān)聽(tīng)狀態(tài)皆疹,然而當(dāng)更改webpack.config.js后我們?nèi)孕枰匦逻M(jìn)行打包操作,這時(shí)我們只需在控制臺(tái)簡(jiǎn)單的按下Ctrl+C后根據(jù)提示輸入字母y回車(chē)確定即可成功退出監(jiān)聽(tīng)狀態(tài)占拍。

本文重點(diǎn)總結(jié)

① 使用file-loader或url-loader可對(duì)圖片進(jìn)行打包操作
② url-loader可將圖片轉(zhuǎn)成base64格式

打包html

到目前為止略就,有關(guān)Webpack最基礎(chǔ)的內(nèi)容差不多已經(jīng)講完了,其中包括Webpack運(yùn)行的基本流程晃酒、CSS的打包圖片的打包表牢,也就是說(shuō),當(dāng)你掌握這幾節(jié)之后贝次,基本上就能像以前不用Webpack時(shí)一樣愉快地寫(xiě)代碼了崔兴。

當(dāng)然,我們其實(shí)還有很多需要優(yōu)化的地方蛔翅,就比如本文所要講到的敲茄,如何將HTML進(jìn)行打包?

在之前的實(shí)例中搁宾,Webpack雖然能夠正常地將各種頁(yè)面所需要的資源從src目錄打包至dist目錄折汞,但是我們?cè)谧詈蟊仨氃赿ist目錄中手動(dòng)去創(chuàng)建HTML頁(yè)面,并引入這些打包后的資源盖腿。

事實(shí)上爽待,Webpack能夠自動(dòng)的幫助我們完成這件事,只需要使用html-webpack-plugin插件即可翩腐。

1. 安裝html-webpack-plugin插件

與安裝loader一樣鸟款,命令行輸入以下命令回車(chē)即可。

npm i -D html-webpack-plugin

2. webpack.config.js中添加相關(guān)配置

const htmlWebpackPlugin = require('html-webpack-plugin');   //  引入html-webpack-plugin插件

module.exports = {
    entry: './src/scripts/index.js',   // 打包入口
    output: {
        path: __dirname + '/dist',    // 輸出路徑
        filename: 'scripts/index.js'     // 輸出文件名
    },
    module: {
        rules: [    // 其中包含各種loader的使用規(guī)則
            {
                test: /\.css$/,  // 正則表達(dá)式茂卦,表示打包.css后綴的文件
                use: ['style-loader','css-loader']   // 針對(duì)css文件使用的loader何什,注意有先后順序,數(shù)組項(xiàng)越靠后越先執(zhí)行
            },
            {   // 圖片打包
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'url-loader',
                options: {
                    name: './images/[name].[ext]',
                    limit: 8192
                }
            }
        ]
    },
    plugins: [   // 打包需要的各種插件
        new htmlWebpackPlugin({   // 打包HTML
            template: './src/index.html'   //  HTML模板路徑
        })
    ],
    watch: true   // 監(jiān)聽(tīng)文件改動(dòng)并自動(dòng)打包
};

3. 添加HTML模板文件

image

HTML模板文件如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Webpack</title>
</head>
<body>
</body>
</html>

是的等龙,除了HTML本身处渣,其他資源如CSS、圖片等均無(wú)需手動(dòng)添加蛛砰,在打包結(jié)束后罐栈,所有資源均會(huì)自動(dòng)添加至HTML文件相應(yīng)位置并進(jìn)入dist目錄。

4. 打包結(jié)束

image

打包后的index.html文件如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Webpack</title>
</head>
<body>
<script type="text/javascript" src="scripts/index.js"></script></body>
</html>

本文重點(diǎn)總結(jié)

打包HTML泥畅,使用 html-webpack-plugin 插件即可

自動(dòng)更新

Webpack中的自動(dòng)打包功能荠诬,很簡(jiǎn)單,在webpack.config.js中添加 watch: true 配置,打包一次之后每次代碼更新后都會(huì)自動(dòng)進(jìn)行打包而無(wú)需重復(fù)輸入命令行柑贞。

當(dāng)然方椎,我們也可以直接給package.json中的scripts添加相關(guān)配置,而無(wú)需更改webpack.config.js钧嘶。

"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack --watch"
}
換句話(huà)說(shuō)棠众,package.json中的webpack --watch與webpack.config.js中的watch: true效果相同。

實(shí)際上有决,Webpack還提供了一個(gè)比watch更方便的功能摄欲,它不僅可以實(shí)現(xiàn)自動(dòng)打包,還具有自動(dòng)打開(kāi)瀏覽器和自動(dòng)刷新頁(yè)面的功能疮薇,可以說(shuō)給我們這幫懶人服務(wù)到了極致,哈哈我注。

下面我們就來(lái)看看具體如何實(shí)現(xiàn)這樣的功能按咒。

  1. 安裝webpack-dev-server
    npm i -D webpack-dev-server

  2. package.json中的scripts添加相關(guān)配置
    "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open"
    }
    其中 --open 就代表打開(kāi)默認(rèn)瀏覽器。

  3. 輸入命令行進(jìn)行打包
    npm run dev
    打包結(jié)束后你會(huì)發(fā)現(xiàn)瀏覽器自動(dòng)打開(kāi)但骨,并且正確顯示打包后的頁(yè)面励七。

  4. 更改任意代碼
    我們可以試著在index.js中添加以下代碼:

var module = require('./module.js');

alert(module.text);
module.js:

var text = 'Hello Webpack!';

module.exports = {
text: text
};
保存后你會(huì)發(fā)現(xiàn)瀏覽器自動(dòng)刷新并彈出彈框“Hello Webpack!”。

值得注意的是奔缠,通過(guò)webpack-dev-server打包后的代碼并不會(huì)進(jìn)入dist目錄掠抬,而是直接創(chuàng)建一個(gè)開(kāi)發(fā)服務(wù)器,并運(yùn)行打包后的代碼校哎。因此两波,通常我們會(huì)將Webpack打包分為兩種模式:開(kāi)發(fā)模式和生產(chǎn)模式。

開(kāi)發(fā)模式顧名思義就是給我們開(kāi)發(fā)時(shí)候用的闷哆,這時(shí)候我們就可以用上webpack-dev-server腰奋,從代碼自動(dòng)打包到自動(dòng)開(kāi)啟瀏覽器再到自動(dòng)刷新全部自動(dòng)化,提高了工作效率抱怔;生產(chǎn)模式顧名思義就是最終代碼上線(xiàn)時(shí)候用的劣坊,這時(shí)候我們就只需使用其最基礎(chǔ)的打包功能,最終打包后的代碼會(huì)進(jìn)入dist目錄屈留,我們只需要將其上傳服務(wù)器即可局冰。

本文重點(diǎn)總結(jié)
① 使用 webpack-dev-server 可自動(dòng)創(chuàng)建開(kāi)發(fā)服務(wù)器,實(shí)現(xiàn)代碼從自動(dòng)打包到自動(dòng)刷新頁(yè)面的自動(dòng)化開(kāi)發(fā)模式
② Webpack有兩種打包模式:開(kāi)發(fā)模式和生產(chǎn)模式灌危,開(kāi)發(fā)模式下可使用 webpack-dev-server 提高開(kāi)發(fā)效率

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末康二,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子乍狐,更是在濱河造成了極大的恐慌赠摇,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異藕帜,居然都是意外死亡烫罩,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)洽故,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)贝攒,“玉大人,你說(shuō)我怎么就攤上這事时甚“祝” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵荒适,是天一觀的道長(zhǎng)梨熙。 經(jīng)常有香客問(wèn)我,道長(zhǎng)刀诬,這世上最難降的妖魔是什么咽扇? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮陕壹,結(jié)果婚禮上质欲,老公的妹妹穿的比我還像新娘。我一直安慰自己糠馆,他們只是感情好嘶伟,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著又碌,像睡著了一般九昧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上毕匀,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天耽装,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛剧罩,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播姓建,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼缤苫!你這毒婦竟也來(lái)了速兔?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤活玲,失蹤者是張志新(化名)和其女友劉穎涣狗,沒(méi)想到半個(gè)月后谍婉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡镀钓,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年穗熬,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片丁溅。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡唤蔗,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出窟赏,到底是詐尸還是另有隱情妓柜,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布涯穷,位于F島的核電站棍掐,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏拷况。R本人自食惡果不足惜塌衰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蝠嘉。 院中可真熱鬧,春花似錦杯巨、人聲如沸蚤告。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)杜恰。三九已至,卻和暖如春仍源,著一層夾襖步出監(jiān)牢的瞬間心褐,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工笼踩, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留逗爹,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓嚎于,卻偏偏與公主長(zhǎng)得像掘而,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子于购,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容