zoukankan      html  css  js  c++  java
  • webpack learn2-vue的jsx写法和postcss 1

    首先输入命令安装

    npm i postcss-loader autoprefixer babel-loader  babel-core

    在根目录创建文件 .babelrc和postcss.config.js

    其中postcss.config.js内容:

    const autoprefixer = require('autoprefixer')
    
    module.exports = {
        plugins: [
            autoprefixer()
        ]
    }

    .babelrc内容:

    {
        "presets": [
            "env"
        ],
        "plugins": [
            "transform-vue-jsx"
        ]
    }

    再次配置webpack.config.js文件,内容:

    const path = require('path')
    
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    const HTMLPlugin = require('html-webpack-plugin')
    const webpack = require('webpack')
    const isDev = process.env.NODE_ENV === 'development'
    
    const config = {
      target: 'web',
      entry: path.join(__dirname,'src/index.js'),
      output: {
        filename: 'bundle.js',
        path: path.join(__dirname,'dist')
      },
      module: {
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader'
          },{
            test: /.jsx$/,
            loader: 'babel-loader'
          },{
            test:/.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },{
            test: /.styl/,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: true
                }
              },
              'stylus-loader'
            ]
          },{
            test:/.(jpg|svg|jpeg|png|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 1024,
                  name: '[name]-aa.[ext]'
                }
              }
            ]
          }
        ]
      },
      plugins:[
          new VueLoaderPlugin(),
          new webpack.DefinePlugin({
            'process.env': {
              NODE_ENV: isDev ? '"development"' : '"production"'
            }
          }),
          new HTMLPlugin()
      ]
    }
    
    if(isDev) {
      // 帮助调试代码
      config.devtool = '#cheap-module-eval-source-map'
      config.devServer = {
        port: 8000,
        host: '0.0.0.0',
        overlay: {
          errors: true
        },
        // 热加载功能:只渲染修改的组件,不会刷新页面
        hot: true
        //open: true 改配置后就自动打开浏览器
      }
      config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
      )
    }
    
    module.exports = config
    View Code

    最后npm run dev

  • 相关阅读:
    【Android SDK Manager】SDk国内镜像下载地址
    DS博客作业02--线性表
    C语言博客作业06--结构体&文件
    C语言博客作业05--指针
    C语言博客作业04--数组
    函数
    循环结构
    C语言顺序结构和分支结构总结
    第0次作业
    TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
  • 原文地址:https://www.cnblogs.com/init-007/p/10915241.html
Copyright © 2011-2022 走看看