项目目录

image.png

package.json

  1. {
  2.   "name": "webpack-vue",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "webpack.config.js",
  6.   "scripts": {
  7.     "build": "webpack --config webpack.config.js"
  8.   },
  9.   "author": "",
  10.   "license": "ISC",
  11.   "devDependencies": {
  12.     "css-loader": "^3.2.0",
  13.     "mini-css-extract-plugin": "^0.8.0",
  14.     "style-loader": "^1.0.0",
  15.     "vue": "^2.6.10",
  16.     "vue-loader": "^15.7.1",
  17.     "vue-template-compiler": "^2.6.10",
  18.     "webpack": "^4.39.3",
  19.     "webpack-cli": "^3.3.7"
  20.   }
  21. }
  • vue-loader和vue-template-compiler需一起使用，用于编译.vue文件
  • css-loader或style-loader处理样式
  • mini-css-extract-plugin：将vue里的CSS提取出来，整合成一个css文件
  • 编译打包执行：npm run build

webpack.config.js

  1. const path = require('path');
  2. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  5. module.exports = {
  6.     mode: 'production',
  7.     entry: './src/main.js', //webpack读取的入口文件
  8.     output: { //打包输出文件路径
  9.         path: path.resolve(__dirname, 'dist'),
  10.         filename: 'index.js'
  11.     },
  12.     module: {
  13.         rules: [
  14.             {
  15.                 test: /\.vue$/,
  16.                 use: 'vue-loader',
  17.             },
  18.             {
  19.                 test: /\.css$/,
  20.                 use: [
  21.                   MiniCssExtractPlugin.loader,
  22.                   "css-loader"
  23.                 ]
  24.             }
  25.         ]
  26.     },
  27.     plugins: [
  28.         new VueLoaderPlugin(),
  29.         new MiniCssExtractPlugin({
  30.             filename: "style.css",
  31.             chunkFilename: "[id].css"
  32.         })
  33.     ],
  34.     resolve: {
  35.         extensions: ['.js','.json','.vue'],
  36.     },
  37. }

main.js

  1. import Vue from 'vue';
  2. import App from './App'
  4. new Vue({
  5.     el: '#app',
  6.     render: h => h(App)
  7. })

App.vue（vue入口文件）

  1. <template>
  2.     <div>
  3.         <p>{{msg}}</p>
  4.         <input type="text" v-model="msg">
  5.         <button class="btn">按钮</button>
  6.     </div>
  7. </template>
  9. <script>
  11. export default {
  12.     data(){
  13.         return {
  14.             msg: "Hello,world"
  15.         }
  16.     },
  17. }
  18. </script>
  19. <style>
  20.     .btn{
  21.         color:red;
  22.     }
  23. </style>

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>搭建vue开发环境</title>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  7.   <link rel="stylesheet" href="./dist/style.css"/>
  8. </head>
  9. <body>
  10.   <div id="app">
  11.   </div>
  12.   <script src="./dist/index.js"></script>
  13. </body>
  14. </html>

webpack-vue.zip