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