1.安装相关依赖
npm i postcss-loader autoprefixer babel-loader babel-core
2.安装babel所需依赖
npm i babel-preset-env babel-plugin-transform-vue-jsx
npm i babel-helper-vue-jsx-merge-props
3.添加 .babelrc 文件
{
"presets": [
"env"
],
"plugins": [
"transform-vue-jsx"
]
}
4.添加postcss.config.js文件
const autoprefixer = require('autoprefixer')
moudel.exports = {
plugins: [
autoprefixer()
]
}
5.修改webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const config = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: "bundle.js",
path: path.join(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
'process.env':{
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new VueLoaderPlugin(),
new HTMLPlugin(),
],
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.jsx$/,
loader: "babel-loader"
},
{
test:/\.css$/,//正则表达式
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.styl/,
use:[
'style-loader',
'css-loader',
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
'stylus-loader'
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)&/,
use:[
{
loader: "url-loader",
options: {
limit:1024,
name:'[name].[ext]'
}
}
]
}
]
}
}
if (isDev) {
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
error:true
},
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config;
6.执行
npm run dev
没有报错说明安装成功