webpack手搭简易版vue

首先新建一个空的文件夹，执行如下命令：

npm init -y

这里小编偷懒选择自动生成，接着生成我们的package.json文件，之后开始准备我们需要的插件；

webpack相关
npm install webpack webpack-cli --save-dev

css相关， 由于简单演示这里就直接用css了
css-loader

vue相关
npm install vue-loader vue-template-compiler --save-dev  
npm install vue --save

接着就是我们的模板html插件

npm install html-webpack-plugin --save-dev

  "author": "srTres",
  "license": "ISC",
  "devDependencies": {
    
    
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "vue-loader": "^15.9.4",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.2.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    
    
    "vue": "^2.6.12"
  }

之后新建一个webpack.config.js文件用于存放我们的配置

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'boundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        loader: 'css-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    inline: true
  }
}

mode的区分

选项	描述
development	会将process.env.NODE_ENV的值设为development。启用NamedChunksPlugin和NamedModulesPlugin。
production	会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

通常在项目里我们的代码都是在src下面的，这里我们也是新建src目录，以及打包后的目录dist
在这里插入图片描述
接着我们在src下面新建一个index.html文件作为我们的页面模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
  </div>
</body>
</html>

新建一个index.js文件做为我们连接页面的入口，之后可以引入vue测试下效果能否实现；

import Vue from 'vue';

new Vue({
  el: '#root',
  data() {
  	return {
  		message:  'hello, webpack-vue'
  	}
  }
  template：·<div>{
   
   { message }}</div>·
})

这里就是我们比较熟悉的vue写法了，代码暂时到这里先告一段落，接下来该我们的打包上场了。
这里通过在我们的package.json的scripts中配置命令，scripts用来放置我们的脚本命令，

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },

这里暂时只需要配置build，dev命令是热更新，稍后我们会说，命令配置好之后，执行

npm run build

这时候我们先前的dist文件下会多出一个boundle.js跟index.html2个文件，这就是我们打包后的代码，
在这里插入图片描述
页面已经展示出我们的message了。
接下来就是新建一个App.vue文件

<template>
  <div>
    {
    
    {
    
     home }}  
    <button>点击</button>
  </div>  
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      home: 'home old'
    }
  },
}
</script>

然后在我们的index.js文件中引入他

import Vue from 'vue';
import App from './app.vue';

console.log('1111')
new Vue({
    
    
  el: '#root',
  template: '<App />',
  components: {
    
    
    App
  }
})

之后再去执行npm run build；
在这里插入图片描述
页面依旧能展示出来，到这里我们配置的vue文件已经可以正常使用，我们也可以像脚手架里一样去使用vue.

*
*关于webpack配置的简易vue到这里就结束了，感谢各位在百忙之中看到这篇文章的小伙伴