webpack打包vue配置

时间:2022-12-19 14:01:57
/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');

module.exports = {
/* 输入文件 */
entry: {
index:'./src/main.js'
},
output: {
/* 输出目录,没有则新建 */
path: path.resolve(__dirname, './dist'),
/* 静态目录,可以直接从这里取文件 */
publicPath: '/dist/',
/* 文件名 */
filename: 'build.js'
},
module: {
rules: [
/* 用来解析vue后缀的文件 */
{
test: /\.vue$/,
loader: 'vue-loader'
},
/* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
{
test: /\.js$/,
loader: 'babel-loader',
/* 排除模块安装目录的文件 */
exclude: /node_modules/
},
/*解析图片url*/
{
test: /\.(png|jpg|gif)$/,
loader:'url-loader?limit=8192'
},
/*解析css*/
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|woff|woff2|ttf|svg)$/,
loader: 'url-loader'
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins : [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
}