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

  • 相关阅读:
    Unknown custom element: <el-container1>
    jQuery手机对话框插件
    告别2013,迎接2014
    淘宝开放平台主动通知的实现
    搭建JavaWeb服务器
    深入理解JavaScript执行上下文和执行栈
    为什么要选择学习Java?适合零基础的初学者的文章
    成为一名优秀的Java程序员9+难以置信的公式
    深入理解JavaScript作用域和作用域链
    JavaScript数据类型转换
  • 原文地址:https://www.cnblogs.com/init-007/p/10915241.html
Copyright © 2011-2022 走看看