webpack4配置vue環境和一些小坑。
初始化一些檔案和依賴
新建一個testwebpack的資料夾。
然後在該資料夾下:
npm init
這時候會出現一個pack.json檔案。
npm i webpack vue vue-loader
這時候警告如下:
npm WARN [email protected] requires a peer of [email protected]* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of
需要安裝css-loader 和vue-template-compiler。
npm i css-loader vue-template-compiler
新建資料夾:
- src > app.vue(根檔案)
<template>
<div id="app">
{{text}}
</div>
</template>
<script >
export default {
name: 'App',
data () {
return {
text: 'this is test'
}
}
}
</script>
<style scoped>
#app {
color: red;
}
</style>
- src > index.js (主入口)
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div' )
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)
新建webpack.config.js
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/main.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
}
}
package.js > script下新增程式碼如下:
因為只有在這裡配置了,才能執行內部的webpack
"build": "webpack --config webpack.config.js"
此時在埠執行npm run build
提示如下:
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages
webpack4需要依賴webpack-cli
webpack-cli
安裝好之後報錯如下:
1、The ‘mode’ option has not been set,
webpack4裡面需要宣告mode來判斷是生產環境還是開發環境
詳見官網:https://webpack.js.org/concepts/mode/
修改build:
"build": "webpack --mode=production --config webpack.config.js"
2、You may need an appropriate loader to handle this file type.
這個報錯說明需要配置loader
配置必要的loader:
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
此時繼續npm run build
報錯如下:
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
提示webpack4配置需要包含VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
然後在輸出裡面配置plugins:
plugins: [
new VueLoaderPlugin()
]
此時發現還有報錯,原因很簡單,沒有安裝style-loader.
npm i style-loader
這時候就可以正常的 run build 了。
配置圖片資源的打包、css前處理器等
新建檔案src>assets>image&&src>assets>styles
然後配置loader:
,
{
test: /\.(jpg|jpeg|svg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 1024,
filename: '[name].[ext]'
}
}
},
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
安裝loader:
npm i stylus stylus-loader url-loader file-loader
此時,就基本完成基本配置了。
devServer的使用
package.js倆面的script配置如下:
"dev": "webpack-dev-server --mode=development --config webpack.config.js"
webpack.config.js裡面進行一些判斷,確定是生產環境還是開發環境:
如何判斷呢?安裝一個cross-env 的包
npm i cross-env
修改package.js內容如下:
"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack.config.js"
然後在weback.config.js定義一個變數:
const isDev = process.env.NODE_ENV === 'development'
如果這個變數為真,則做如下操作:
if (isDev) {
config.devtool = '#cheap-module-eval-source-map',
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors: true
//熱載入
hot: true
},
//下面是不重新整理更新內容
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),,
new webpack.NoEmitOnErrorsPlugin()
)
}
這時候還需要一個html來展示,
const HTMLPlugin = require('html-webpack-plugin')
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin()
],
到這裡,基本配置就已經完成了。
postCss、babel-loader使用
npm i postcss autoprefixer babel-loader babel-core
- postcss: 後處理css的作用
aotuprefixer
const autoorefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer()
]
}
2.vue中使用jsx
npm i babel-env babel-plugin-transform-vue-jsx
rules新增如下:
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{
test:/\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
//選項的作用使用來提高效率的。
},
'stylus-loader'
]
},
這裡我遇到一個坑,最後在官方文件找到了。
test:/\.styl$/,
使用上面的配置無法解析vue中的stylus,需要向下面這樣配置:
test:/\.styl(us)?$/,
這樣就可以了。
正式打包的時候,如何分離css檔案
npm install --save-dev extract-text-webpack-plugin
webpack4升級後,使用這個會有很多坑,如下:
開發環境的rules不變:
if (isDev) {
config.module.rules.push(
{
test: /\.styl(us)?$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
}
)
// 開發環境就這樣就可以了
如果是生產環境:
else {
config.output.filename = '[nams].[chunkhash:8].js'
// 生產環境必須是chunkhash
config.module.rules.push(
{
test: /\.styl(us)?$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
}
)
config.plugins.push(
// new ExtractTextPlugin("styles.[ontentHash:8].css")
new ExtractTextPlugin('styles.[hash:8].css')
// 根據內容得到hash值
)
}
坑1:
webpack4不支援extract-text-webpack-plugin3.0版本,需要使用4.0-beat版本:
npm i extract-text-webpack-plugin@next
坑2:
config.plugins.push(
// new ExtractTextPlugin("styles.[ontentHash:8].css")
new ExtractTextPlugin('styles.[hash:8].css')
// 根據內容得到hash值
)
這裡不能使用style.[contentHash:8].css
到這裡最終編譯成功~
單獨打包vue程式碼
config.entry = {
app: path.join(__dirname, 'src/index.js'),
vendor: ['vue']
}
config.optimization = {
splitChunks: {
cacheGroups: {
commons: {
chunks: 'initial',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true
}
}
},
runtimeChunk: true
}
相關推薦
webpack4配置vue環境和一些小坑。
初始化一些檔案和依賴 新建一個testwebpack的資料夾。 然後在該資料夾下: npm init 這時候會出現一個pack.json檔案。 npm i webpack vue vue-loader 這時候警告如下: npm WARN [
Vue遇到的一些小坑
1.在使用v-html指令時,發現新增的元素不能設定樣式 解決方案:在新增樣式時使用>>>就可以新增成功 例如:<div v-html="<img src="1.jpg"/>" ></div> .xuanran_d
vue專案配置生產環境和釋出環境的介面地址
平常我們團隊開發時,都在公司的區域網內,呼叫介面也是區域網內部的,但是專案上線時,請求介面是線上伺服器端的,那麼就有介面之間的來回切換問題.在使用vue-cli搭建專案以後,做相關配置就可以實現,不用手動更改介面路徑,也可以請求不同環境下的介面.1.設定不同的介面地址先找到以
使用vue-cli構建vue工程,及一些小坑的記錄
這篇文章主要記錄如何構建一個vue工程,及踩到過的坑 使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery外掛 一、使用vue-cli建立一個vue的工程 涉及到的命令包括:
配置vue環境
dev npm 初始化 -- span ica tao cli col 1.node環境2.安裝cnpm淘寶鏡像npm install -g cnpm --registry=http://registry.npm.taobao.org3.安裝vue-cli腳手架工具 cnp
vue.js的一些小語法v-for,v-text,v-html,v-on:click
對象 -- 變量 src method methods value {} click 1.Vue的目錄結構: =================================================================================
搭建VUE環境和下載的命令提示符步驟
界面 post nod 腳手架 命令提示符 直接 cli 安裝 pos 打開電腦命令提示符 開始菜單-輸入cmd-(再輸入以下步驟)node -v 查看node.js的當前版本npm install vue -g(全局) 在npm網址(代碼倉庫
Vue.js 和 MVVM 小細節
冗余 touch one 提高 初始化 分享 問題 函數 為什麽 MVVM 是Model-View-ViewModel 的縮寫,它是一種基於前端開發的架構模式,其核心是提供對View 和 ViewModel 的雙向數據綁定,這使得ViewModel 的狀態改變
Webpack 安裝配置vue環境
cor 準備 創建 uid 下載 工作 cli 工具 web 前言 第一次寫東西,可能會比較亂,還請理解! 安裝步驟 打開命令行工具,輸入 node -v 查看NodeJS的版本號,若未出現版本號則請移步http://nodejs.cn/download/ 進行下載安裝
Window配置Redis環境和簡單使用
盤符 情況 redis net ID .html microsoft eight 高速緩存 一、關於Redis Redis是一個開源(BSD許可),內存存儲的數據結構服務器,可用作數據庫,高速緩存和消息隊列代理。它支持字符串、哈希表、列表、集合、有序集合,位圖,hyper
[Note]一些小坑點
64位 inpu note clu class scan amp code pri scanf 一個有趣的現象:如果用%lld或%I64d寫入int的話,會出現一些神奇的現象,大概是因為強制寫入了64位從而訪問到了非法內存。 小例子: #include <cstdio
VS2017+AirSim4.20.3+Boost1.68.0配置and安裝的一些小問題
.org -h ntb 8.0 image display com https use 一、下載軟件 VS2017:https://visualstudio.microsoft.com/zh-hans/downloads/ (學生版免費的) Boost1.68.0下載:h
Linux下安裝MySQL以及一些小坑
還需 .com star itl inux ret sdn 鏈接 keyword 第一次寫博客,各位湊合著看吧(假裝有人看)。 我這裏使用的是centos7。 1、首先打開終端,查看有沒有安裝過MySQL: [root@localhost lyp]# rpm -qa |
tf.data.Dataset的一些小坑
我們使用資料的時候都是用batch來做輸入,使用tf.data.Dataset的時候,一般會這樣寫: dataset = dataset.batch(batch_size).repeat(epochs) 用來說明我們需要對整個資料集進行多少個epochs,每次的輸入大小是多少個
寫小程式的一些小坑
1.關於資料繫結的問題 小程式更新data後只是把資料的值更新,不會重新整理頁面,比如滑動的列表不會回到頂部,導致使用swiper有個小bug: 就是swiper的資料是後臺請求的,可通過切換tab標籤動態獲取,如果在切換之前swiper處在第三張或者更多(比將要點選的tab下的swiper多
Redis安裝過程中出現的一些小坑
gcc安裝好 可以通過 gcc -v 檢視 再次make 還會報錯 cd src && make all make[1]: Entering directory `/opt/redi
關於python課程的淺顯理解和一些小建議
在我的理解中,python語言是一種強大的面向物件的計算機程式設計語言,語句較簡單容易懂,但是對於我這種愚笨的學生,可能學的比較慢,也不太容易懂!所以在這裡我懇切的希望老師多強調一些這門課程的重點難點!眾所周知,熟能生巧,希望能通過反覆的強調來達到這麼一種效果!在我們的教學中,總是理論和實踐相結合的!很明顯p
WordPress 網站做資料來源的小程式一些小坑
WordPress 網站做資料來源的小程式,一般就看看官方文件做,官方文件寫的怎樣就不吐槽了,反正很多看了等於沒看,會讓你繞很多彎。 這裡記錄一些小坑注意點,能想起的先敲敲,很多忘了。 一些只有 true、false 的元件值,不能直接雙引/單引賦值 例如:表單
TensorFlow中關於LeNet-5網路的一些小坑
本篇文章提到的一些坑主要來自於學習《TensorFlow實戰Google深度學習框架》一書第6.4章節中關於使用LeNet5做MNIST 一 LeNet-5簡介 LeNet-5模型是Yann LeCun教授於1998年在論文Gradient-based learnin
03-掌控板遇到的一些小坑
在昨天試用了幾個編輯器後,今天準備正式開始學習掌控板的程式設計。應林老師要求,主要還是以mPthonx這個編輯器為主,林老師的意思是讓我在用的過程中看看這個編輯器是否存在一些bug。結果這一上手還真讓人大跌眼鏡。 由於昨天在幾個編輯器中來回切換了幾次,今天把板子接入電腦之後,開啟m