webpack learn2-vue的jsx写法和postcss 1

梦里梦外; 2021-11-10 02:48 238阅读 0赞

**首先输入命令安装**

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文件,内容:**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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

**最后npm run dev**

转载于:https://www.cnblogs.com/init-007/p/10915241.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211109/1744c448509b4f1d9117397ca5c69326.png