-
2019年1月5號 課程：Vue+Webpack打造todo應用 2-1 跟著老師的步驟一步步配置webpack，結果一直報錯。經過半個多小時的排查，發現版本的問題。webpack到4之后，以及vue-loader到15之后，需要配置VueLoaderPlugin，以及要重新配置css-loader，代碼如下： const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: path.join(__dirname, 'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.css$/, loader: 'css-loader' } ] }, plugins: [ new VueLoaderPlugin() ] }查看全部
-
webpack-dev-server: 專門用于開發環境，提高開發效率
使用方法：webpack-dev-server --config webpack.confog.js
npm中設置環境變量的包為：cross-env，為Mac和Windows兩個平臺統一設置環境變量的方式，用法：cross-env NODE_ENV=production或cross-env NODE_ENV=development，寫在script命令里面，啟動腳本的時候設置的環境變量都是存在process.env這個對象里面的，在代碼中可以通過這個對象取得設置的環境變量
安裝配置文件：
1、npm init
2、npm i wbpack vue vue-loader
3、npm i css-loader vue-template-compiler
4、npm i style-loader url-loader file-loader
5、npm i stylus-loader stylus
6、npm i webpack-dev-server
7、npm i cross-env
8、npm i html-webpack-plugin查看全部 -
還在找源碼的小同學看這里,本人正在學習這個課程,歡迎小伙伴們一起交流
項目源碼地址+超詳細注釋,小白和大神都可以一起交流哈
https://github.com/Jasonccj/vue-webpack-todo查看全部 -
項目搭建文檔
代碼中具體細節都有詳細注釋
1.vue+webpack項目工程配置
npm init 初始化一個npm項目
npm i [email protected] [email protected] [email protected] 安裝webpack和vue,使用vue要安裝vue-loader
npm i [email protected] [email protected] 根據終端WARN提示安裝css-loader,因為vue-loader依賴css-loader //針對各版本做了詳細指定,由于更新過快,避免版本差異性問題,故指定了版本在app.vue中書寫基本的vue結構
首先在webpack.config.js設置入口entry
聲明我們的入口文件index.js示例中app.vue實際是一個組件,組件是不能直接掛載到我們的html中去,需要在index.js中掛載
webpack.config.js同樣設置出口文件bundle.js及存放路徑
配置完后,在webpack.config.js中配置build腳本, --config 指定我們的config文件 因為在這里面寫,當你調用時才會調用這個項目里面的webpack,否則將會調用全局的webpack,全局webpack和項目中的版本可能存在差異,建議使用這種方式會好一點
webpack對其他類型的文件處理,可在配置文件中配置rules規則. 同樣根據配置中的處理的loader都要安裝. npm i [email protected] [email protected] [email protected]
stylus的css預處理器 npm i [email protected] [email protected] 同理其他的像sass,less等其他的預處理器都可以類似的方法去使用
查看全部 -
自己跟2-1視頻的第三遍，終于經過自己的努力和網上找資料，看學友們的問答終于整明白了。
ps：我本地是提前安裝好了node.js、npm、webpack的3.*.*版本;
今天邊嘗試邊做，終于弄出來了，可以跟下一個視頻了；希望能幫到小伙伴們。
如果還想問的詳細點可以私聊我。
特此把自己的代碼貢獻給大家看看。
查看全部 -
瀏覽器一直報錯，原因是webpack-dev-server 版本大于3.1.10 ，需要額外配置參數disableHostCheck:true。參考https://www.v2ex.com/t/519971
查看全部 -
踩坑記錄（時間節點：2018-12-24）
1、warn提示需要安裝css-loader依賴
2、webpack4版本需要安裝webpack-cli，根據提示安裝就行
3、在webpack.config.js中配置開發模式
4、缺少VueloDelpLuin，在vue官網照著加上https://vue-loader.vuejs.org/zh/migrating.html
5、安裝vue-template-compiler
字符限制，教程詳情+代碼已上傳歡迎下載學習
https://github.com/dcrysg/webpack4-vue-loader-tudo如果對您有幫助請給我一顆小星星查看全部 -
踩坑記錄（時間節點：2018-12-24）
這一節課，因為新版本差別較大，所以我沒有跟著教程敲，而是通過視頻理解了作者大致的思路，然后根據webpack官方文檔進行配置。整理為以下幾點
1：配置webpack-dev-server（實時重新加載）
2：配置HtmlWebpackPlugin（個人理解為解析html文件）
3：啟用模塊熱替換（HMR）
整個視頻教程已學完，從webpack3優雅升級到webpack4，代碼已上傳，歡迎下載學習
https://github.com/dcrysg/webpack4-vue-loader-tudo，如果對您有幫助，請給我一顆小星星。查看全部 -
1、數據綁定
2、Vue文件開發方式：組件化，寫組件比較方便
3、render方法：（Vue的核心實現也變成了虛擬Dom），數據變化時啟動render方法更新HTML
????template標簽里的所有節點最終都是通過render方法中的createElement方法創建一個個節點，得到一個節點樹
5、要真正理解Vue的開發模式我們要理解它的render方法，這是我們深入理解Vue很需要掌握的一個知識
6、vue的api重點：生命周期方法、computed，
查看全部 -
webpack-dev-server: 專門用于開發環境，提高開發效率
使用方法：webpack-dev-server --config webpack.confog.js
npm中設置環境變量的包為：cross-env，為Mac和Windows兩個平臺統一設置環境變量的方式，用法：cross-env NODE_ENV=production或cross-env NODE_ENV=development，寫在script命令里面，啟動腳本的時候設置的環境變量都是存在process.env這個對象里面的，在代碼中可以通過這個對象取得設置的環境變量
設置html文件作為入口：需要安裝webpack插件：html-webpack-plugin
查看全部 -
講的挺好查看全部
-
npm?install?style-loader?url-loader?file-loader
查看全部 -
npm init
查看全部 -
注:development---dev是開發環境,本地環境
production--build是生產環境
####webpack-dev-server的配置
? ###第一步:下載
npm i webpack-dev-server
? ###第二步:修改代碼
在package.json中的腳本scripts中添加
dev:'webpack-dev-server webpack.config.js'
在webpack.config.js中添加一個全局變量target:'web'
? ###第三步:配置環境
下載 npm i cross-env
修改package.json中的腳本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --config webpack.config.js"
},
? ###第四步:在不同的開發環境下設置環境變量
下載 npm i cross-env
設置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
? ###第五步:設置webpack.config.js----添加dev環境
// 判斷dev是否調用, 是否為true 是否是development環境
const isDev=process.env.NODE_ENV === 'development';
config = {
// 只在前端展示
target:'web',
...
module:{
...
}
}
if(isDev){
config.devServer={
port:8000,
<!-- 為了在其他電腦上也能監聽訪問 -->
<!-- 可以通過127.0.0.1訪問,也可以通過IP訪問 -->
host:'0.0.0.0',
<!-- 定位錯誤并顯示 -->
overlay:{
errors:true
}
}
}
module.exports = config
? ###第六步:設置webpack.config.js----添加.html的入口文件并識別它
下載 npm i html-webpack-plugin
引入 const htmlPlugin = require('html-webpack-plugin')
因為 new webpack.DefinePlugin()
所以引入webpack const webpack = require('webpack);
添加全局的plugins屬性
config = {
// 只在前端展示
target:'web',
...
module:{
...
},
plugins:[
<!-- 使用vue必須要用的一個plugis,因為vue會根據不同的環境區分打包 -->
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev ? '"development"' : '"production"'
(一定要加"",如果不寫,相當于調用的是process.env.NODE_ENV=development,
而定義的是process.env.NODE_ENV="development",所以會報錯)
}
}),
<!-- 這是個數組,可以添加很多plugins -->
new htmlPlugin()
]
}
? ###第七步:啟動項目 npm run dev ? (會打包成功),
? ###第八步:webpack-dev-server的其他功能補充---open,historyFallback
if(isDev){
config.devServer={
port:8000,
host:'0.0.0.0',
overlay:{
errors:true
},
historyFallback:{
// ? 把沒有映射的頁面請求的地址,,映射到index.html中
},
open:true ?//自動打開頁面,根據需求添加
}
}
? ###第九步:webpack-dev-server的其他功能補充---hot ?
if(isDev){
cofig.devtool='#cheap-module-eval-source-map' //幫助我們在頁面上調試代碼,使用cheap-module-eval-source-map進行映射
config.devServer={
...
hot:true ?// 作用是當只改變一個組件時,只重新渲染這個組件,而不改變其他的組件或內容,但是需要添加config.plugins.push()
},
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
?###第十步:重新啟動npm run dev 就可以使用hot功能了
查看全部 -
##2,在根目錄下新建webpack.config.js文件,并寫入以下代碼
// 為了在瀏覽器中打開,建立webpack這個文件
// 引入路徑
const path = require('path')
module.exports = {
// 文件的輸入
entry:path.join(__dirname,'src/index.js'),
//文件的輸出
output:{
filename:'bundle.js',
path:path.join(__dirname, 'dist')
},
<!-- 由于報錯:You may need an appropriate loader to handle this file type. 所以我們需要添加module屬性 -->
module:{
rules:[
### ? ? ? ? ? ? ? ? ? ?<!-- 加載.vue的文件 --> (需安裝 npm i vue-loader )
{
test:/\.vue$/, //此為正則表達式,目的是為了識別.vue結尾的文件
loader:'vue-loader'
},
### ? ? ? ? ? ? ? ? ? ?<!-- 加載.css或者style的樣式 --> ?(需安裝 npm i css-loader style-loader)
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
],
},
##? ? ? <!-- 加載圖片類型的文件 --> ?(需安裝 ?npm i url-loader?
? ? ? ? ? (因為url-loader需要依賴file-loader)? ? file-loader)
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader:'url-loader',
options:{
?# ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?limit:1024, ? ?( 最少1024,可以減少http請求)
?# ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:'[name].[ext]' ?(重新輸出名字 ext為擴展名如jpg等 此外還可以自己加名字,如: '[name]-aaa.[ext]')
}
}
]
},
{
test: /\.styl/,
use:[
'style-loader',
'css-loader',
## ? ? ? ?'stylus-loader' ?(需 npm i stylus-loader)
]
}
]
}
}
###css預處理器 ?stylus
stylus可以不寫標點符號,如:
body
? ? font-size 12px
####
當在終端中輸入 mpm run build 之后
會在根目錄下生成dist目錄,具體如
>dist
? ? + bundle.js?
? ? + 各種圖片文件
所有的css樣式都寫在了bundle.js里面去了
查看全部
舉報