码迷,mamicode.com
首页 > Web开发 > 详细

webpack 环境搭建基础框架

时间:2018-02-10 15:02:48      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:cat   jpg   tar   rebuild   runtime   div   res   XML   rac   

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

 

 

 

webpack 环境搭建基础框架

标签:cat   jpg   tar   rebuild   runtime   div   res   XML   rac   

原文地址:https://www.cnblogs.com/CyLee/p/8438666.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!