不用vue-cli搭建项目总结

原文链接https://blog.csdn.net/u013368397/article/details/86467581

一、打开对应的空目录，使用npm init创建项目

npm init

二、安装vue和webpack，安装loader转换器，包括vue-loader，css-loader，url-loader，style-loader

npm i webpack vue vue-loader
npm i style-loader css-loader url-loader

三、新建src目录，并在src目录创建App.vue文件

四，新建入口文件，默认index.js（可根据创建项目时entry point选项的名字创建），并写入部分代码

//这是工程的入口文件
import Vue from 'vue';
import App from './app.vue';
 
const root = document.createElement('div')
document.body.appendChild(root)
 
//mount就是讲我们的App挂载到root这样一个根节点中去
new Vue({
  render: (h) => h(App)
}).$mount(root)

五、新建webpack.config.js文件，配置entry入口和out出口

const path = require("path");//nodejs里面的基本包，用来处理路径
 
//__dirname表示文件相对于工程的路径
module.exports ={
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}

六、由于我使用的是webpack4，所以这里必须要安装一下cli，这里安装这个cli包是因为webpack4之后强制要求安装的，但是我们并没有通过该工具来初始化整个工程，所以建出来的目录也是不一样的

七、配置module和plugin，把需要用到的转换器配置进去

const path = require("path");//nodejs里面的基本包，用来处理路径
const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
//__dirname表示文件相对于工程的路径
module.exports ={
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
],
  mode:'none',
  module: {
    rules: [
       {//通过vue-loader来识别以vue结尾的文件
         test: /.vue$/, 
         loader: 'vue-loader'
       },
       {//通过vue-loader来识别以vue结尾的文件
        test: /.css$/, 
        //css的处理方式不同，有嵌入在页面style标签里的，有从外部文件引入的，我们这里用use来声明
        use: [
          'style-loader',//接受潜在页面内部的style标签的文件。
          'css-loader'
        ]
      }
    ]
  }
}

八、在package.json添加命令

"build": "webpack --config webpack.config.js"

在终端运行npm run build，打包项目成功，搭建项目完成