這篇文章主要介紹了Vue+webpack項目基礎(chǔ)配置教程,需要的朋友可以參考下。

最近在學(xué)習(xí)webpack，跟著課程一個單頁面應(yīng)用，在這里記錄一下。

這個部分主要講了如何配置webpack的環(huán)境，以及webpack dev的配置。

記錄比較粗略，后續(xù)會更新。

1.開發(fā)環(huán)境：

vscode,node.js,vue.js,webpack
大家自己安裝一下node.js可以參考菜鳥教程
使用的IDE是 VScode2.項目初始化
快捷鍵ctrl+` 打開vscode控制臺

2.1安裝webpack vue vue-loader

npm 出現(xiàn)warn提醒你需要依賴，按照提示進行安裝

安裝相應(yīng)的loader

2.2配置webpack可以加載app.vue文件

首先創(chuàng)建src文件夾，并在其下創(chuàng)建app.vue最為主代碼文件，index.js作為入口文件。

app.vue文件內(nèi)容如下：

在src同級目錄下
創(chuàng)建webpack.config.js文件，配置入口entry，輸出output

創(chuàng)建package.json文件和webpack.config.js文件

index.js文件作為入口

配置package.json文件中的scripts命令，添加build

配置package.json文件中的scripts命令，添加build

在控制臺輸入npm run build 命令進行打包，打包成功后如圖：

webpack打包完成后
2.3配置webpack可以加載非Js文件
webpack.config.js文件具體配置
在webpack.config.js中的module: {}模塊中添加rules:[]，可以設(shè)置webpack需要識別的文件類型，之前已經(jīng)設(shè)置了vue文件類型，好需要添加css/圖片。

在控制臺執(zhí)行命令，安裝相應(yīng)的loader

測試非js類型文件打包效果
目標：在js代碼中import這些非js類型的文件中的內(nèi)容
再src子目錄下，創(chuàng)建測試文件test.css。以及在images中放入jpg圖片代用(一張就可以了，emmm我當時放多了就先不刪了)

在Index.js中import這些非js文件。

最后在控制臺執(zhí)行 npm run build 測試結(jié)果。
打包成功圖片類似上面。
2.4關(guān)于css預(yù)處理器。stylus的配置和測試
stylus是css的一種預(yù)處理器，文件類型是 .styl 我們這里對其進行配置
首先在webpack.config.js文件中的rules:[]模塊中跟上面一樣，加入如下代碼，讓其可以識別.styl文件

然后在控制臺安裝stylus所需的loader文件

最后在控制臺執(zhí)行 npm run build 測試結(jié)果。
2.5配置webpack-dev-server:專門用在開發(fā)環(huán)境的打包
因為正式環(huán)境和我們的開發(fā)環(huán)境有所區(qū)別，所以需要配置dev用來區(qū)分
首先，安裝 webpack-dev-server

然后， 修改package.json文件 ，在build下面添加dev配置

然后，修改webpack.config.js
在全局添加target:'web'

因為這個文件要同時用在開發(fā)環(huán)境和正式環(huán)境，所以要加一個環(huán)境判斷，在跑npm的時候添加變量標識不同環(huán)境。
因為在windows和mac環(huán)境下的命令會不同，這里安裝cross-env 包，使得在不同開發(fā)環(huán)境下命令相同。

再次修改package.json文件,在“build:”和“dev:"行添加dev命令
cross-env NODE_ENV=development 后面不變

然后，在webpack.config.js文件中進行判斷。
首先，配置config.devServer
webpack2之后就可以直接用config.devServer進行配置了。
更改文件頭部幾行代碼

在文件的最后加上如下代碼

注意：
host:'0.0.0.0'不要直接寫localhost，這樣別人的電腦就訪問不了了；port不要被占用，不然會打不開
最后.安裝html-webpack-plugin插件使得html可以作為入口，自動包含JS

修改webpack.config.js文件

config.js

config.js
至此，dev配置基本完成
控制臺執(zhí)行 npm run dev

打包成功的話就可以在瀏覽器中查看效果了，
如果出現(xiàn)錯誤，根據(jù)提示修改，注意端口是否占用。我的8000端口占用了，后來用了8080端口就好了
瀏覽器訪問：localhost:8080,可以查看渲染效果。恩，背景圖0.jpg是我愛豆23333。筆芯。注意左上角有紅色的abc。

瀏覽器效果
2.6最后還有一些東西要加在config.js中
最后還要加一些東西
1) historyFallback:{}
因為我們做的是單頁應(yīng)用，所以要加一下地址映射到入口index.html，這個先忽略
2) 熱加載功能。
hot功能，可以實現(xiàn)局部渲染：比如你改了一個組件的代碼，頁面只重新渲染這個組件而不是整個頁面進行渲染，不需要進行刷新操作。
3) 一些插件

webpack.NoEmitOnErrorsPlugin()去除一些不必要的信息
4) 瀏覽器調(diào)試代碼功能的工具
在瀏覽器中調(diào)試的時候，代碼不會轉(zhuǎn)碼。

最后配置完成后，重新npm run dev一次
npm run dev
成功之后，可以在瀏覽器中測試熱加載效果，修改app.vue文件中的text的內(nèi)容，就可以看到左上角那個紅色的字在變了emmmm

上面是我整理給大家的，希望今后會對大家有幫助。

總結(jié)

以上是生活随笔為你收集整理的vue 判断页面加载完成_在Vue+webpack中详细讲解基础配置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。