Vue+webpack從零搭建工程項目
阿新 • • 發佈:2019-01-02
不理解 end itl too heap 不同 mod scripts clas
基礎項目搭建
準備工作
# vscode 打開命令行
ctrl + `(esc下面的鍵)
# 在目錄下面,初始化一個 npm項目
npm init
# 安裝庫
npm i webpack vue vue-loader
# 根據提示安裝其他的庫
npm i css-loader
npm i vue-template-compiler
項目目錄介紹
dist //將打包的資源輸出目錄 node_modules // 安裝的庫目錄 src // 源碼目錄 app.vue // vue初始組件 index.js //入口文件 package.json //項目配置信息文件,在用 npm init命令後生成 webpack-config.js //webpack打包配置文件
app.vue
// html代碼
<template>
<div class="title"> {{text}}</div>
</template>
// js代碼
<script>
export default {
data(){
return{
text :"hello world"
}
}
}
</script>
// css代碼
<style>
.title{
color: red;
}
</style>
index.js
// 將組件掛載到vue當中
import Vue from ‘vue‘
import App from ‘./app.vue‘
// 將 vue組件掛載到一個 root節點中
const root = document.createElement(‘div‘)
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)
webpack.config.js 打包配置
// webpack打包資源的配置 圖片,js,html等 // node.js基礎包 const path = require(‘path‘) const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘); module.exports={ //程序入口文件,將當前的目錄與後面的地址拼接 entry:path.join(__dirname,‘src/index.js‘), //輸出路徑,webpack將 vue等信息打包為一個可以在瀏覽器運行的js文件 output:{ filename:‘bundle.js‘, path:path.joinnpm i style-loader url-loader file-loader(__dirname,‘dist‘) }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ], // 指定用什麽處理 vue文件, webpack不能處理 vue文件 module:{ rules:[ { test:/.vue$/, loader:‘vue-loader‘ } ] } }
package.json
{
"name": "todolist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^2.1.0",
"vue": "^2.5.21",
"vue-loader": "^15.4.2",
"webpack": "^4.28.2"
}
}
tips: 需要在此處配置,使用項目中的webpack ,在命令行中執行用的是全局的 webpack "build":"webpack --config webapck.config.js"
編譯
npm run build
# 編譯時可能提示需要安裝庫安裝即可
# npm install -D webpack-cli
編譯問題
You may need an appropriate loader to handle this file type.?
webpack只能處理js es5的文件,對 vue類型的文件,不能處理,我們需要手動指定處理規則
查看 bunde.js代碼,在這個其實有 vue代碼, webpack 做的就是把 靜態資源打包成 js文件,便於瀏覽器處理
webpack靜態資源的處理
安裝庫
npm i style-loader url-loader file-loader
npm i stylus stylus-loader
配置信息
// webpack打包資源的配置 圖片,js,html等
// node.js基礎包
const path = require(‘path‘)
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
module.exports={
//程序入口文件,將當前的目錄與後面的地址拼接
entry:path.join(__dirname,‘src/index.js‘),
//輸出路徑,webpack將 vue等信息打包為一個可以在瀏覽器運行的js文件
output:{
filename:‘bundle.js‘,
path:path.join(__dirname,‘dist‘)
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module:{
rules:[
{
// 指定vue-loader處理 vue文件, 處理 vue文件
test:/\.vue$/,
loader:‘vue-loader‘
},
{
//處理 css
test:/\.css$/,
// 使用css-loader讀取內容,用 style-loader處理css寫入到html代碼中去
use:[
‘style-loader‘,
‘css-loader‘
]
},
{
// css 預處理文件
test:/\.styl/,
use:[
‘style-loader‘,
‘css-loader‘,
‘stylus-loader‘
]
},
{
// 圖片處理的 loader
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
// 使用 url-loader(依賴於file-loader)處理 圖片資源,options是要給url-loader傳遞的參數
loader:‘url-loader‘,
options:{
// 如果文件的大小小於1024kb,將將其轉換為base64代碼,存入html中
limit:1024,
// 輸出圖片原先的名字
name:‘[name]-rao.[ext]‘
}
}
]
}
]
}
}
那麽配置之後,就可以在js代碼中 import 非js內容. index.js文件
// 引入非js.代碼
import Vue from ‘vue‘
import App from ‘./app.vue‘
import ‘./assets/styles/todo.css‘
import ‘./assets/images/todo.png‘
import ‘./assets/styles/todo-stylus.styl‘
// 將 vue組件掛載到一個 root節點中
const root = document.createElement(‘div‘)
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)
webpack-dev-server的配置和使用
安裝庫
// 開發服務器
npm i webpack-dev-server
// 環境的切換 適應不同的平臺
npm i cross-env
// html插件
npm i html-webpack-plugin
在 package.json配置 dev-server
"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.cofig.js配置
// webpack打包資源的配置 圖片,js,html等
// node.js基礎包
const path = require(‘path‘)
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
const HTMLPlugin = require(‘html-webpack-plugin‘)
const webpack = require(‘webpack‘)
// 設置的環境變量存儲在 process.env中
const isDev = process.env.NODE_ENV===‘development‘
const config ={
// 指定webpack的編譯目標是web平臺
target:‘web‘,
//程序入口文件,將當前的目錄與後面的地址拼接
entry:path.join(__dirname,‘src/index.js‘),
//輸出路徑,webpack將 vue等信息打包為一個可以在瀏覽器運行的js文件
output:{
filename:‘bundle.js‘,
path:path.join(__dirname,‘dist‘)
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
new HTMLPlugin(),
// 定義一個環境變量 在這裏定義了,在js代碼中可以直接使用
new webpack.DefinePlugin({
‘process.env‘:{
NODE_ENV:isDev ?‘"development"‘:‘"production"‘
}
})
],
module:{
rules:[
{
// 指定vue-loader處理 vue文件, 處理 vue文件
test:/\.vue$/,
loader:‘vue-loader‘
},
{
//處理 css
test:/\.css$/,
// 使用css-loader讀取內容,用 style-loader處理css寫入到html代碼中去
use:[
‘style-loader‘,
‘css-loader‘
]
},
{
// css 預處理文件
test:/\.styl/,
use:[
‘style-loader‘,
‘css-loader‘,
‘stylus-loader‘
]
},
{
// 圖片處理的 loader
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
// 使用 url-loader(依賴於file-loader)處理 圖片資源,options是要給url-loader傳遞的參數
loader:‘url-loader‘,
options:{
// 如果文件的大小小於1024kb,將將其轉換為base64代碼,存入html中
limit:1024,
// 輸出圖片原先的名字
name:‘[name]-rao.[ext]‘
}
}
]
}
]
}
}
// 環境切換的判斷
if (isDev){
// webpack打包後的js是轉移的(如es6轉程es5),在出錯後不好定位,需要把轉換後的js代碼映射,這樣我門
// 查看錯誤的時候,還是我們編寫代碼樣式,便於定位
config.devtool ="#cheap-module-eval-source-map"
// 開發環境配置
config.devServer= {
port:‘8001‘,
// 設置成 0.0.0.0可以通過 localhost,127.0.0.1,本機ip進行訪問
host:‘0.0.0.0‘,
//如果有錯直接顯示在網頁上面
overlay:{
errors:true
},
// // 將server不理解的地址,映射首頁
// historyFallback:{
// },
//在啟動的時候自動打開瀏覽器
open:true,
// 只渲染當前組件的效果,不會整個項目重新渲染
hot:true
}
config.plugins.push(
// 熱加載需要的插件
new webpack.HotModuleReplacementPlugin(),
// 過濾一些不需要的信息
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports =config
Vue+webpack從零搭建工程項目