node+webpack(一)node.js+webpack+vue，webpacknode.js

node+webpack(一)node.js+webpack+vue，webpacknode.js

依赖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 install webpack --save-dev

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')
}

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'