node+webpack(一)node.js+webpack+vue
阿新 • • 發佈:2018-12-11
依賴node,vscode
vscode外掛推薦:
1.Chinese (Simplified) Language Pack for Visual Studio Code 2.Vetur 3.vscode-icons 4.EditorConfig for VS Code 5.View In Browser |
vscode配置
{ "files.autoSave": "onFocusChange", "editor.fontSize": 20, "editor.tabSize": 2 }
1.
ctrl+` 開啟命令列
node設定淘寶npm映象
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.
npm init
一直回車即可
npm i webpacke vue vue-loader
npm i css-loader vue-template-compiler
npm i style-loader url-loader file-loader
3.
新建src資料夾
在src下新建app.vue
<template> <div id="test">{{text}}</div> </template> <script> export default { data(){ return{ text:'abc' } } } </script> <style> #test{ color: red; } </style>
4.在src同級目錄新建webpack.config.js
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$/, use: ['style-loader','css-loader'] }, { test: /\.(gif|jpg|jpeg|png|svg)$/, use: [ { loader:'url-loader', options:{ limit:1024, name:'[name]-aaa.[ext]' } } ] } ] }, plugins:[ new VueLoaderPlugin() ] }
5.在src下建立assets,在assets下建立images和styles
styles下建立test.css
body{
color: red;
background-image: url('../images/bg.jpeg')
}
6.在src下新建index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/test.css'
import './assets/images/bg.jpeg'
const root=document.createElement('div')
document.body.appendChild(root)
new Vue({
render:(h)=>h(App)
}).$mount(root)
7.修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
8.
npm run build
加入css前處理器
加入外掛 language-stylus
npm i stylus-loader stylus
1.修改webpack.config.js
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [
{
loader:'url-loader',
options:{
limit:1024,
name:'[name]-aaa.[ext]'
}
}
]
}
]
2.在styles下新增test-stylus.styl
body
font-size: 20px
3.index.js 匯入
import './assets/styles/test-stylus.styl'