wepack版本
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
webpack配置
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
//__dirname动态获取当前文件模块所属目录的绝对路径
//__filename可以获取当前文件的绝对路径
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist/'),
filename:'bundle.js' //指定输出文件的名称
},
resolve:{
alias:{
//修改Vue被导入的路径
"vue$":"vue/dist/vue.js",
"@u": path.resolve("src/utils"),
}
},
//该节点用于所有第三方模块加载器
module:{
rules:[
{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=17631&name=[hash:8]-[name].[ext]']},
{test: /\.css$/,use:['style-loader','css-loader']},
{test:/.vue$/,use:'vue-loader'},
{test: /\.js$/,use:'babel-loader',exclude:/node_modules/ },
{test: /\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
]
},
plugins:[
//配置热更新模块对象
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
//指定模板对象 将来根据指定的页面路径 去生成内存中的页面
filename:'index.html'
}),
new VueLoaderPlugin()
],
devServer: {
contentBase: path.join(__dirname, 'src'),
host:'localhost',
port:3000,
proxy: {
'/api': { // api表示当前项目请求的key
target: 'http://novel.juhe.im', // 代理服务器路径
pathRewrite: {'^/api' : '/'}, // 重写路径
secure: false, // 接受 运行在 https 上的服务
changeOrigin: true,
https: false
}
},
hot:true
}
}
path.resolve([...paths])方法:
将路径或路径片段处理成绝对路径
生成的路径会进行规范化,并且删除末尾的斜杠,除非路径是根目录。
例1:
path.resolve('/foo/bar', './baz');
// 返回: '/foo/bar/baz
例2:
path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif');
// 如果当前工作目录是 /home/myself/node,则返回 '/home/myself/node/wwwroot/static_files/gif/image.gif'