webpack從零開始第1課:安裝webpack和webpack-dev-server
webpack目錄
第1課: 安裝webpack和webpack-dev-server
本文參考文檔
webpack官方安裝文檔?https://webpack.js.org/guides...??中文翻譯
webpack-dev-server官方安裝文檔:?https://webpack.js.org/guides...
package.json官方詳解:?https://docs.npmjs.com/files/...
webpack命令行各參數(shù)的用法:?https://webpack.js.org/api/cli/?中文翻譯
webpack-dev-server的配置?https://webpack.js.org/config...?中文翻譯
官方插件列表?插件中文翻譯html-webpack-plugin插件托管地址和用法html-loader托管地址和用法file-loader托管地址和用法
官方網(wǎng)站1?官方網(wǎng)站2官方文檔官方教程中文版本文檔
前提條件
電腦裝了一個全新的nodejs，最好是LTS版本,舊的nodejs版本可能沒使用webpack的新功能，也可能會丟失一些依賴的包
先安裝好淘寶的cnpm，淘寶鏡像方便些
我的安裝環(huán)境是win10
一：安裝webpack和webpack-dev-server
1.準(zhǔn)備工作
新建項(xiàng)目文件夾D:\03www2018\study\webpack2017?下面簡寫為?根目錄
新建npm配置文件package.josn,根目錄>cnpm init
2.項(xiàng)目局部安裝webpack和webpack-dev-server
不建議全局安裝webpack和webpack-dev-server
局部安裝webpack?根目錄>cnpm i webpack -D
局部安裝server?根目錄>cnpm i webpack-dev-server -D
會自動生成node_modules文件夾,下有804個文件夾(485+319server)個文件夾，這些包都是webpack的依賴
package.json中增加了剛安裝的包webpack的配置
"devDependencies": {"webpack":"^3.10.0","webpack-dev-server":"^2.9.7"}
說明1: devDependencies是開發(fā)依賴，只會在打包過程中用到，不會包含到最后的代碼中
說明2: 如果想安裝指定版本的webpack，使用npm install --save-dev webpack@<版本號>格式
3.熟悉webpack命令行各參數(shù)的意思
有關(guān)命令行各參數(shù)的用法，根目錄>"node_modules/.bin/webpack" -h
上面這個執(zhí)行webpack很不方便，修改根目錄>package.json，在script加上兩條
"scripts": {
"a":"webpack --config ./build/webpack.dev.conf.js",
"b":"webpack-dev-server --config ./build/webpack.dev.conf.js",
"test":"echo \"Error:notestspecified\" && exit 1"
},
命令行的選項(xiàng)其實(shí)都可以寫在配置文件webpack.config.js中，寫在配置文件中更方便更強(qiáng)大。webpack啟動時要讀取配置文件，參數(shù)--config指定讀取哪個配置文件，如果沒有使用--config指定，會默認(rèn)在根目錄中找webpack.config.js或webpackfile.js這個文件,有關(guān)配置文件的命名隨意定，但最好帶上環(huán)境，如webpack.base|dev|prod.conf.js
01: 配置選項(xiàng) Config options:?
?--config? ? ? 配置文件路徑，字符串格式，默認(rèn)是`根目錄`下的 webpack.config.js 或 webpackfile.js，
--config-name? 使用配置的名字，字符串
--env? ? ? ? ? 當(dāng)配置文件輸出的是一個函數(shù)時，要指定，在下一節(jié)課中會介紹
02: 基本選項(xiàng) Basic options:?
?--context? ? 入口文件根目錄，默認(rèn)為當(dāng)前目錄
--entry? ? ? 入口文件,這里只能是字符串，但在配置文件中還可以定義數(shù)組或?qū)ο?/p>
--watch, -w? 監(jiān)視是否有文件有改動，會自動打包，默認(rèn)為false
--debug? ? ? Switch loaders to debug mode? ? ? ? ? ? ? ? ? ? ? ? ? ? [boolean]
--devtool? ? Enable devtoolforbetter debugging experience (Example:--devtool eval-cheap-module-source-map)? ? ? ? ? ? ? ? ? [string]
-d? ? ? ? ? shortcutfor--debug --devtool eval-cheap-module-source-map--output-pathinfo? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [boolean]
-p? ? ? ? ? shortcutfor--optimize-minimize --defineprocess.env.NODE_ENV="production"? ? ? ? ? ? ? ? ? ? ? [boolean]??
--progress? Print compilation progressinpercentage? ? ? ? ? ? ? ? [boolean]
03: 模塊選項(xiàng) Module options:?
?--module-bind Bindanextensiontoaloader[string]
--module-bind-post? [string]
--module-bind-pre [string]
04: 輸出選項(xiàng) Output options:??
--output-path? ? ? ? ? ? ? ? The output pathforcompilation assets[string] [default: The current directory]? --output-filename? ? ? ? ? ? The output filename of the bundle[string] [default: [name].js]??
--output-chunk-filename? ? ? The output filenameforadditional chunks[string] [default: filename with [id] instead of [name] or [id] prefixed]?
--output-source-map-filename? The output filenameforthe SourceMap? [string]
--output-public-path? ? ? ? ? The public pathforthe assets? ? ? ? ? [string]
--output-jsonp-function? ? ? The name of the jsonp function usedforchunkloading? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [string]??
--output-pathinfo? ? ? ? ? ? Include a comment with the requestforeverydependency (require, import, etc.)? ? [boolean]??
--output-library? ? ? ? ? ? ? Expose the exports of the entry point as library[string]??
--output-library-target? ? ? The typeforexposing the exports of the entrypoint as library? ? ? ? ? ? ? ? ? ? ? ? [string]
05: 高級選項(xiàng) Advanced options:??
--records-input-path? ? ? Path to the records file (reading)? ? ? ? [string]
--records-output-path? ? ? Path to the records file (writing)? ? ? ? [string]
--records-path? ? ? ? ? ? Path to the records file? ? ? ? ? ? ? ? ? [string]
--define? ? ? ? ? ? ? ? ? Define any free varinthe bundle? ? ? ? ? [string]
--target? ? ? ? ? ? ? ? ? The targeted execution environment? ? ? ? [string]
--cache? ? ? ? ? ? ? ? ? ? Enableinmemory caching[boolean] [default: It's enabled by default when watching]??
--watch-stdin, --stdin? ? Exit the processwhenstdin is closed? ? [boolean]
--watch-aggregate-timeout? Timeoutforgathering changeswhilewatching
--watch-poll? ? ? ? ? ? ? The polling intervalforwatching (also enablepolling)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [string]??
--hot? ? ? ? ? ? ? ? ? ? ? Enables Hot Module Replacement? ? ? ? ? ? [boolean]
--prefetch? ? ? ? ? ? ? ? Prefetch this request (Example:--prefetch./file.js)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [string]?
--provide? ? ? ? ? ? ? ? ? Provide these modules as free varsinall modules(Example: --provide jQuery=jquery)? ? ? ? [string]??
--labeled-modules? ? ? ? ? Enables labeled modules? ? ? ? ? ? ? ? ? [boolean]
--plugin? ? ? ? ? ? ? ? ? Load this plugin? ? ? ? ? ? ? ? ? ? ? ? ? [string]
--bail? ? ? ? ? ? ? ? ? ? Abort the compilation on first error[boolean] [default: null]??
--profile? ? ? ? ? ? ? ? ? Profile the compilationandincludeinformationinstats? ? ? ? ? ? ? ? ? ? [boolean] [default: null]
06: 解析選項(xiàng) Resolving options:??
--resolve-alias Setup amodulealiasforresolving(Example:jquery-plugin=jquery.plugin)? ? ? ? ? ? ? ? ? [string]??
--resolve-extensions? ? Setup extensions that should be used to resolvemodules (Example: --resolve-extensions .es6,.js)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [array]??
--resolve-loader-alias? Setup a loaderaliasforresolving? ? ? ? ? ? [string]
07: 優(yōu)化選項(xiàng) Optimizing options:??
--optimize-max-chunks? ? ? Try to keep the chunk count below a limit
--optimize-min-chunk-size? Try to keep the chunk size above a limit
--optimize-minimize? ? ? ? Minimize javascriptandswitches loaders tominimizing? ? ? ? ? ? ? ? ? ? ? ? ? ? [boolean]
08: 統(tǒng)計(jì)選項(xiàng) Stats options:??
--color, --colors? ? ? ? ? ? ? Enables/Disables colors on the console[boolean] [default: (supports-color)]??
--sort-modules-by? ? ? ? ? ? ? Sorts the modules list by propertyinmodule[string]?
?--sort-chunks-by? ? ? ? ? ? ? ? Sorts the chunks list by propertyinchunk[string]??
--sort-assets-by? ? ? ? ? ? ? ? Sorts the assets list by propertyinasset[string]??
--hide-modules? ? ? ? ? ? ? ? ? Hides info about modules? ? ? ? ? ? [boolean]
--display-exclude? ? ? ? ? ? ? Exclude modulesinthe output? ? ? ? [string]
--display-modules? ? ? ? ? ? ? Display even excluded modulesinthe output[boolean]??
--display-max-modules? ? ? ? ? Sets the maximum number of visible modulesinoutput? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [number]? --display-chunks? ? ? ? ? ? ? ? Display chunksinthe output? ? ? ? [boolean]
--display-entrypoints? ? ? ? ? Display entry pointsinthe output? [boolean]
--display-origins? ? ? ? ? ? ? Display origins of chunksinthe output[boolean]??
--display-cached? ? ? ? ? ? ? ? Display also cached modulesinthe output[boolean]??
--display-cached-assets? ? ? ? Display also cached assetsinthe output[boolean]??
--display-reasons? ? ? ? ? ? ? Display reasons aboutmoduleinclusionintheoutput? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [boolean]??
--display-depth? ? ? ? ? ? ? ? Display distance from entry pointforeachmodule? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [boolean]?
?--display-used-exports? ? ? ? ? Display information about used exportsinmodules (Tree Shaking)? ? ? ? ? ? ? [boolean]??
--display-provided-exports? ? ? Display information about exports providedfrom modules? ? ? ? ? ? ? ? ? ? ? ? [boolean]??
--display-optimization-bailout? Display information about why optimizationbailed out for modules? ? ? ? ? ? ? [boolean]??
--display-error-details? ? ? ? Display details about errors? ? ? ? [boolean]
--display? ? ? ? ? ? ? ? ? ? ? Select display preset (verbose, detailed,normal, minimal, errors-only, none)? [string]??
--verbose? ? ? ? ? ? ? ? ? ? ? Show more details? ? ? ? ? ? ? ? ? ? [boolean]
09: 選項(xiàng) Options:??
--help, -h? ? 顯示幫助信息? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?--version, -v? 版本號? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
--json, -j? ? 將結(jié)果以JSON格式顯示
4.準(zhǔn)備項(xiàng)目文件夾及文件
為了更好地演示和學(xué)習(xí)webpack，請建好下列文件夾和文件
先只需寫這幾個文件，后面會陸續(xù)補(bǔ)充
二：打包
準(zhǔn)備配置文件
根目錄/build/webpack.dev.conf.js的內(nèi)容如下，這是史上最簡單的配置文件了
module.exports= {? ??
????????????entry:'./src/main',//main.js中的.js可以省略，前面的./不能省
????????????output:{? ? ? ? filename:'./dist/app.js'// dist文件夾不存在時，會自動創(chuàng)建}
}
根目錄/src/main.js中隨便寫一句
console.log('hello,歡迎來到零和壹在線課堂')
打包
D:\03www2018\study\webpack2017>npm run a,顯示如下
打開打包后的文件看下,整體是一個自執(zhí)行文件，每個文件是一個模塊做為自執(zhí)行函數(shù)的參數(shù)
三：開啟服務(wù)器
先啟動看下，根目錄>npm run b
從啟動的信息中可以看到，它包含了上面的打包，項(xiàng)目的網(wǎng)址是http://localhost:8080/，可以在瀏覽器中打開看下效果，但由于沒有指定入口文件，所以會顯示當(dāng)前目錄的內(nèi)容,有一點(diǎn)必須明白，服務(wù)器打包的后的文件并沒有物理存在電腦上，只是在內(nèi)存中，為了方便教程的講解，在這里先講下服務(wù)器的配置，有關(guān)全部配置的講解，請參考下一篇文章:配置文件詳解
3.1 使用HtmlWebpackPlugin插件生成首頁
首頁一般為一個html文件，我們到現(xiàn)在還沒有定義，為了方便，順便提前了解一下webpack的插件功能，我這里使用HtmlWebpackPlugin來生成首頁，插件的使用基本相同，分以下幾步
第一步安裝?根目錄>cnpm i -D html-webpack-plugin
修改配置文件?根目錄/build/webpack.dev.conf.js
const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin');//第二步導(dǎo)入
module.exports = {?
????????entry:'./src/main',//main.js中的js可以省略，前面的./不能省
????????output:{filename:'./dist/[hash]app.js',hashDigestLength:8// 默認(rèn)長度是20},
????????plugins: [newHtmlWebpackPlugin],//第三步，實(shí)例化后放在plugins這個數(shù)組中就行
????????devServer: {
????????????????contentBase: path.join(__dirname,"../dist"),//網(wǎng)站的根目錄為 根目錄/dist，如果配置不對，會報(bào)Cannot GET /錯誤
????????????????port:9000,//端口改為9000
????????????????open:true// 自動打開瀏覽器，適合懶人
????????}
}
生成的html文件只在內(nèi)存中，并沒有存在物理磁盤上，來看一下生成的內(nèi)容,留心下生成的js文件中的hash值，它的長度是8位，就是上面hashDigestLength: 8定義的
html-webpack-plugin的用途
對于打包的文件名中有hash的，這個插件是必選，因?yàn)槊看卧次募薷模虬蟮拿志筒灰粯?/p>
生成一個html5模板文件，可適用于lodash模板，也可以利用自己定義的加載器
js注入，打包后的js文件會自動注入到html文件的body結(jié)尾部分(默認(rèn)，也可以注入到head部分)
css文件注入,假如你使用ExtractTextPlugin插件(這個插件也是必須要了解的)將css文件是單獨(dú)剝離出來，不放在html中的style標(biāo)簽內(nèi)，它會自動將css鏈接注入到link標(biāo)簽中
html-webpack-plugin插件完整配置
const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin');
const HtmlWebpackPluginConfig={title:'hello,零和壹在線課堂',// html5文件中部分filename:'front.html',// 默認(rèn)是index.html，服務(wù)器中設(shè)置的首頁是index.html，如果這里改成其它名字，那么devServer.index改為和它一樣，最終完整文件路徑是output.path+filename，如果filename中有子文件夾形式，如`./ab/cd/front.html`，只取`./front.html`template:'./src/template/daqi.html',//如果覺得插件默認(rèn)生成的hmtl5文件不合要求，可以指定一個模板，模板文件如果不存在，會報(bào)錯，默認(rèn)是在項(xiàng)目根目錄下找模板文件，才模板為樣板，將打包的js文件注入到body結(jié)尾處inject:head,// true|body|head|false，四種值，默認(rèn)為true,true和body相同,是將js注入到body結(jié)束標(biāo)簽前,head將打包的js文件放在head結(jié)束前,false是不注入，這時得要手工在html中加js}module.exports = {entry:'./src/main',//main.js中的js可以省略，前面的./不能省output:{filename:'./dist/[hash]app.js',hashDigestLength:8},plugins: [newHtmlWebpackPlugin(HtmlWebpackPluginConfig)],//先不配置插件，看看效果devServer: {contentBase: path.join(__dirname,"../dist"),//網(wǎng)站的根目錄為 根目錄/distport:9000,//端口改為9000open:true,// 自動打開瀏覽器index:'front.html'// 與HtmlWebpackPlugin中配置filename一樣}}
3.2 devServer常用配置
const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin');
const HtmlWebpackPluginConfig={title:'hello,零和壹在線課堂',// html5文件中部分filename:'front.html',// 默認(rèn)是index.html，服務(wù)器中設(shè)置的首頁是index.html，如果這里改成其它名字，那么devServer.index改為和它一樣template:'./src/template/daqi.html',// 如果覺得插件默認(rèn)生成的hmtl5文件不合要求，可以指定一個模板，模板文件如果不存在，會報(bào)錯，默認(rèn)是在項(xiàng)目根目錄下找模板文件，才模板為樣板，將打包的js文件注入到body結(jié)尾處inject:'body',// true|body|head|false，四種值，默認(rèn)為true,true和body相同,是將js注入到body結(jié)束標(biāo)簽前,head將打包的js文件放在head結(jié)束前,false是不注入，這時得要手工在html中加js}module.exports = {entry:'./src/main',//main.js中的js可以省略，前面的./不能省output:{filename:'./dist/[hash]app.js',hashDigestLength:8},plugins: [newHtmlWebpackPlugin(HtmlWebpackPluginConfig)],//先不配置插件，看看效果devServer: {contentBase: path.join(__dirname,"../dist"),//網(wǎng)站的根目錄為 根目錄/distport:9000,//端口改為9000host:'192.168.0.103',//如果指定的host，這樣同局域網(wǎng)的電腦或手機(jī)可以訪問該網(wǎng)站,host的值在dos下使用ipconfig獲取 open:true,// 自動打開瀏覽器index:'front.html',// 與HtmlWebpackPlugin中配置filename一樣inline:true,// 默認(rèn)為true, 意思是，在打包時會注入一段代碼到最后的js文件中，用來監(jiān)視頁面的改動而自動刷新頁面,當(dāng)為false時，網(wǎng)頁自動刷新的模式是iframe，也就是將模板頁放在一個frame中hot:false,compress:true//壓縮}}
結(jié)合服務(wù)器和html插件，最后生成的配置文件如下
constpath =require('path')constHtmlWebpackPlugin =require('html-webpack-plugin');constwebpack =require('webpack')constHtmlWebpackPluginConfig={? ? title:'hello,零和壹在線課堂',// html5文件中部分filename:'front.html',// 默認(rèn)是index.html，服務(wù)器中設(shè)置的首頁是index.html，如果這里改成其它名字，那么devServer.index改為和它一樣// 也是 context+template是最后模板的完整路徑，./不能少template:'./template/daqi.html',// 如果覺得插件默認(rèn)生成的hmtl5文件不合要求，可以指定一個模板，模板文件如果不存在，會報(bào)錯，默認(rèn)是在項(xiàng)目根目錄下找模板文件，才模板為樣板，將打包的js文件注入到body結(jié)尾處inject:'body',// true|body|head|false，四種值，默認(rèn)為true,true和body相同,是將js注入到body結(jié)束標(biāo)簽前,head將打包的js文件放在head結(jié)束前,false是不注入，這時得要手工在html中加js}module.exports = {? ? context: path.resolve(__dirname,'../src'),//D:\03www2018\study\webpack2017\build\srcentry:'./main',//main.js中的js可以省略，前面的./不能省output:{? ? ? ? path:path.resolve(__dirname,'../dist'),? ? ? ? filename:'./[hash]app.js',? ? ? ? hashDigestLength:8},module: {? ? ? ? ? ? ? ? rules: [? ? ? ? ? ? ? ? ? ]? ? ? },? ? plugins: [newHtmlWebpackPlugin(HtmlWebpackPluginConfig),// 生成首頁html5文件，外部插件需要安裝newwebpack.DefinePlugin({BJ:JSON.stringify('北京'),})// 內(nèi)置插件，無須安裝，可以理解為它是webpack實(shí)例的一個方法，該插件相當(dāng)于apache等web服務(wù)器上定義一個常量],? ? devServer: {? ? ? contentBase: path.resolve(__dirname,"../dist"),//網(wǎng)站的根目錄為 根目錄/dist，這個路徑一般與output.path一致，因?yàn)閔tml插件生成的html5頁是放在output.path這個目錄下port:9000,//端口改為9000open:true,// 自動打開瀏覽器，每次啟動服務(wù)器會自動打開默認(rèn)的瀏覽器index:'front.html',// 與HtmlWebpackPlugin中配置filename一樣inline:true,// 默認(rèn)為true, 意思是，在打包時會注入一段代碼到最后的js文件中，用來監(jiān)視頁面的改動而自動刷新頁面,當(dāng)為false時，網(wǎng)頁自動刷新的模式是iframe，也就是將模板頁放在一個frame中hot:false,? ? ? compress:true//壓縮}}
3.3 給首頁加一張圖片
webpack，通過使用file-loader可以將圖片當(dāng)成一個模塊，使用require來導(dǎo)入，進(jìn)一步可以使用url-loader將圖片轉(zhuǎn)成base64-data
使用圖片的場景大致分四種，html文件中使用src標(biāo)簽，樣式的background中設(shè)定背景，js文件中元素.innerHTML='<img src="logo.jpg"/>'的方式，最后一種是在vue或react等框架中使用，今天要講的是第一種，如何處理html文件src標(biāo)簽中的圖片
html文件中圖片的處理有兩種，一種是象正常使用圖片一樣，不打包，但圖片必須放在打包生成文件目錄下，如./dist/logo.jpg，也就是最后的入口front.html文件可以讀到的位置，在front.html中使用<img src="./logo.jpg"/>,表示logo.jpg與最后生成的front.html是同級目錄。但實(shí)際工作中，往往圖片放在與打包前的html模板文件一起的，需要將圖片和html模板文件分別打包到./dist下，這使用html-loader是解決不了的，官網(wǎng)及網(wǎng)上大部分教程講得不是特別清楚，在這里我詳細(xì)講下，這里就要用到file-loader，否則會報(bào)錯Error: Child compilation failed: Module parse failed: Unexpected character '?' (1:0)You may need an appropriate loader to handle this file type.
第1步：安裝html-loader和file-loader,根目錄/cnpm i -D html-loader file-loader
file-loader處理require('./logo.jpg')這種類型，將圖片當(dāng)成一個js模塊
html-loader是將html中src標(biāo)簽中配置有特定data屬性的圖片，轉(zhuǎn)為由require的方式來導(dǎo)入。也就是說，它只是標(biāo)識為哪些圖片需要由require的方式導(dǎo)入，但具體require導(dǎo)入，得需要file-loader插件，
第2步：在webpack.conf.js中配置這兩個加載器
module: {rules: [? ? ? ? {? ? ? ? ? ? test: /\.html$/,? ? ? ? ? ? use: {? ? ? ? ? ? ? ? loader:'html-loader',? ? ? ? ? ? ? ? options: {? ? ? ? ? ? ? ? attrs: [':data-src']? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? },? ? {test: /\.(png|jpg|gif)$/,? ? ? ? use: [? ? ? ? ? {? ? ? ? ? ? loader:'file-loader',? ? ? ? ? ? options: {? ? ? ? ? ? ? ? //name:'[path][name].[ext]',? ? ? ? ? ? ? ? name:'[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原來的文件名字，擴(kuò)展名，路徑? ? ? ? ? ? ? ? //useRelativePath:true,? ? ? ? ? ? ? ? outputPath:'img/'// 后面的/不能少? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ]? ? ? },? ? ? ? ]? ? ? },
第3步：在html文件src標(biāo)簽中引用圖片
<img src="/img/logo2.jpg" data-src="../images/logo/jpg" />
這里注意，data-src是打包前圖片位置，src是打包后圖片的url
四: 手機(jī)或其它電腦訪問該服務(wù)器
實(shí)際開發(fā)中，需要手機(jī)或其它設(shè)備如ipad即時訪問該服務(wù)器
服務(wù)器: 就是開啟webpack-dev-server這臺電腦
其它設(shè)備：下面以同一網(wǎng)絡(luò)下的手機(jī)為例(同一wifi就行)
第一步：配置服務(wù)器
devServer: {contentBase: path.join(__dirname,"../dist"), //網(wǎng)站的根目錄為 根目錄/dist，如果配置不對，會報(bào)Cannot GET /錯誤? ? port:9000,? ? open: true,? ? host:'192.168.0.103'//請?jiān)赿os下，輸入ipconfig可以找到當(dāng)前電腦的ip}
第二步：在手機(jī)上找一個合適的瀏覽器，輸入?192.168.0.103:9000就可以訪問
說明：有少數(shù)瀏覽器打開是空白網(wǎng)頁，我使用uc瀏覽器ok，ip地址和端口與你自己的設(shè)置有關(guān)，我上面只是我的設(shè)置
下一課:?webpack從零開始第2課: 配置文件
轉(zhuǎn)自：https://segmentfault.com/a/1190000012536871
轉(zhuǎn)自：webpack從零開始第1課:安裝webpack和webpack-dev-server - 個人文章 - SegmentFault 思否
