zoukankan      html  css  js  c++  java
  • vue使用webapck的最基本最简单的开发环境配置

    这个配置生成出来的代码只能支持ES6的浏览器下正常显示。

    npm init -y

    npm install vue-loader vue-template-compiler vue-style-loader css-loader webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

    npm install vue --save

    const path = require('path');
    const VueLoaderPlugin =  require('vue-loader/lib/plugin'); 
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    
    const config ={
      entry: {
        app: './src/main.js'
      },
      output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname,'dist')
      },
      resolve:{
        extensions: ['.js','.vue']
      },
      devServer: {
        contentBase: './dist',
        hot: true
      },
      module:{
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader'
          },    
        {
          test: /.css/,
          loader: ['vue-style-loader','css-loader']

        }
        ]
      },
      plugins:[
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: './src/index.html',
          inject: true,
          hash: true
        }),
      ]
    };
    module.exports = config;//千万千万别忘了这一行
    

     

    一直提示can't resolve 'App',解决办法 

    在main.js里,import App from "./App";用相对路径就可以了。

    环境搭建:

    refer: https://www.jianshu.com/p/87b48e29773c

  • 相关阅读:
    【C++日常】C++动态命名变量名
    两个整数相除
    Jsp页面跳转 接收时的乱码问题
    Reverse a singly linked list
    Java处理excel文件
    Navicat for mysql 破解
    EasyUi 分页 和 表格数据加载
    Spring 框架下Controller 返回结果在EasyUI显示
    svn ubuntu command(转载)
    Shiro Security
  • 原文地址:https://www.cnblogs.com/Gift/p/10508618.html
Copyright © 2011-2022 走看看