vue + webpack 项目搭建环境（没写完）

一、搭建环境

安装node.js

npm init初始化项目

npm install webpack vue vue-loader css-loader  安装依赖包

如果提示要安装 vue-template-complier，npm install vue-template-complier即可。 

新建src文件夹+app.vue 文件

安装 syle-loader url-loader file-loader

sass less 自行配置和安装。

项目根目录新建webpack.config.js文件

const path = require('path')

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:/\.styl/,
        use:[
            'style-loader',
            'css-loader',
            'stylus-loader',
        ]
    },
    {
        test:/\.(gif|jpg|jpeg|png|svh)$/,
        use:[
            {
            loader:'url-loader',
            options:{
                limit:1024,
                name:'[name].[ext]'
            }
        }
        ]
    }
]
}
}

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)

package.json文件要加打包指令

scriptx下加  “build”:"webpack --config webpack.config.js"

命令行执行 npm run build 即可打包文件

注意：安装依赖包过程中，有碰到依赖包版本不一致的问题，比如webpack 4.x版本以上要安装webapck-cli

安装过程有可能报要清缓存的错，执行 npm cache clean --force 即可。

 

webpack-dev-server 配置

npm i webpack-dev-server