webpack 环境搭建基础框架

Posted 2020-10-24 贝尔塔猫

一、安装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,
                },
            }
        ]
    },