webpack 环境搭建基础框架

一、安装babel相关

1，安装依赖

cnpm i -D babel-core babel-loader babel-preset-env babel-preset-stage- 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,

                },

            }

        ]

    },

巴特西

webpack 环境搭建基础框架

最新文章

热门文章