zoukankan      html  css  js  c++  java
  • webpack 环境搭建基础框架

    一、安装babel相关

    1,安装依赖

    cnpm i -D babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-plugin-transform-runtime

    2,新建.babelrc

    {
        presets: [
            [
              "env",
              {
                "targets": {
                  "browsers": ["last 5 versions", "ie >= 8"]
                }
              }
            ],
            "babel-preset-stage-2"
        ],
        plugins: [
            'transform-runtime'
        ]
    }

    3,相关webpack.conf.js 片段

    module: {
         rules: [
                {
                   test: /.vue$/,
                   loader: 'vue-loader',
                },
         ]
    }

    二、安装静态资源全家桶(img/svg、字体图标、css/scss/style/postcss/autoprefixer)

    1,安装依赖

    cnpm i -D style-loader url-loader sass-loader node-sass css-loader autoprefixer-loader postcss-loader autoprefixer extract-text-webpack-plugin file-loader
    
    # 神坑
    npm rebuild node-sass

    2,相关webpack.conf.js 片段

    module: {
            rules: [
                {
                    test: /.(scss|sass|css)$/,
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' },
                        {
                          loader: 'postcss-loader',
                          options: {
                            sourceMap: true,
                            plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
                          },
                        },
                        {
                           loader: 'sass-loader',
                           query: {
                             sourceMap: true
                           }
                        }
                   ]
                },
                {
                    test: /.woff(?v=d+.d+.d+)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        minetype: 'application/font-woff',
                    },
                },
                {
                    test: /.ttf(?v=d+.d+.d+)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        minetype: 'application/octet-stream',
                    },
                },
                { 
                    test: /.eot(?v=d+.d+.d+)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        minetype: 'application/vnd.ms-fontobject',
                    },
                },
                {
                    test: /.svg(?v=d+.d+.d+)?$/,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        minetype: 'image/svg+xml',
                    },
                },
                {
                    test: /.(png|jpg|jpeg|gif)(?v=d+.d+.d+)?$/i,
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                    },
                }
            ]
        },

     

  • 相关阅读:
    【JEECG技术文档】JEECG online 表单填值规则使用说明
    【JEECG技术文档】JEECG 接口权限开发及配置使用说明
    【JEECG技术文档】JEECG 组织机构导入V3.7
    【JEECG技术文档】Online唯一校验使用说明
    h5 文件下载
    babel (三) babel polly-fill
    babel (二) update to v7
    babel(一)
    noode inquirer
    node path
  • 原文地址:https://www.cnblogs.com/CyLee/p/8438666.html
Copyright © 2011-2022 走看看