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