Vue+webpack从零搭建工程项目

Posted 2021-01-31 那天很冷

基础项目搭建

准备工作

# 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