用webpack打包一个简单的vue文件

1.桌面新建一个文件夹

比如  vue-demo

2.打开cmd终端,输入以下命令

yarn init -y  
//初始化包环境
yarn add webpack webpack-cli -D
//安装依赖包

3.在package.json中配置scripts(自定义命令)

  scripts: {
"build": "webpack"
  } 

4.新建public/index.html

  准备一个id叫app的div

5.新建src/index.js

//这是默认入口文件
import App from './App.vue' // 根vue文件
import Vue from 'vue' // 引入vue.js对象
 new Vue({ 
render: h => h(App) 
// 渲染函数, 渲染App组件里的标签
}).$mount('#app') 
// 把vue文件的标签结构 -> 挂载到id为app的标签里

6.新建src/App.vue

     <template>
         <div class="example">{{ msg }}</div>
     </template>
     <script>
      export default {
         data () {
         return {
         msg: 'Hello world!'
          }
        }
       }
     </script>
    <style>
     .example {
       color: red;
     }
    </style>      

7.新建webpack.config.js

     const { VueLoaderPlugin } = require('vue-loader')
     module.exports = {
     mode: 'development',
     module: {
       rules: [
         {
         test: /\.vue$/,
         loader: 'vue-loader'
        },
        // 它会应用到普通的 `.js` 文件
        // 以及 `.vue` 文件中的 `<script>` 块
       { 
       test: /\.js$/,
       loader: 'babel-loader'
      },
       // 它会应用到普通的 `.css` 文件
       // 以及 `.vue` 文件中的 `<style>` 块
     {
      test: /\.css$/,
      use: [
      'vue-style-loader',
      'css-loader'
      ]
    }
  ]
 },
 plugins: [
 // 请确保引入这个插件来施展魔法
 new VueLoaderPlugin()
 ]
}

8.安装必要的加载器

yarn add  -D 
            vue 
            vue-loader 
            vue-template-compiler
            css-loader 
            babel-loader 
            @babel/core @babel/preset-env

9.执行打包命令

 yarn build
 生成dist/main.js  // 这是出口文件
 1.在dist中手动复制public中的index.html
 2.引入main.js到dist/index.html中

10.打开index.html,查看效果

11.可选功能

 1.自动生成html
 安装 html-webpack-plugin插件
 2.开发服务器自动刷新
  安装 webpack-dev-server