代码拉取完成,页面将自动刷新
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugins = require('./node_modules/vue-loader/lib/plugin')
const webpack = require('webpack')
const {
options
} = require('less')
module.exports = {
entry: './src//main.js',
output: {
path: path.join(__dirname, './dist/'), // 出口路径必须是个绝对路径
filename: 'bundle.js', // 打包结果的文件名
},
devtool: 'eval-cheap-module-source-map',
mode: 'development',
plugins: [
new htmlWebpackPlugin({
template: './index.html'
}),
new VueLoaderPlugins(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
proxy: {
'/api': { // api表示当前项目请求的key
target: 'http://localhost:3000', // 代理服务器路径
pathRewrite: {
'^/api': '/'
}, // 重写路径
changeOrigin: true
}
}
},
externals: {
// 前面是包名,后面是包里导出的全局接口对象
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_'
},
module: {
rules: [
//css
{
test: /\.css$/,
use: [
//这两个顺序不能反了
'style-loader',
'css-loader'
]
},
//img
{
test: /\.(png|jpg|svg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
esModule: false // 防止出现打包后请求的资源变成 [object-object]
}
}
},
//less
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
//js(bable)
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
//vue
{
test: /\.vue$/,
use: ['vue-loader']
}
]
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。