2024基于webpack从0搭建vue项目，vue2，成功跳槽阿里

},

// 配置 mode, development 开发环境 production 生产环境

mode: ‘production’,

// 配置解析

resolve: {

alias: {

// key: value

‘@’: path.join(__dirname, ‘src’)

},

// 配置可省略的后缀

extensions: [‘.js’, ‘.css’, ‘.less’, ‘.vue’]

},

// 配置源码映射

// devtool: ‘source-map’,

// 配置 loader

module: {

// 配置规则

rules: []

},

// 配置 plugin

plugins: [

// 自动生成html文件的插件

new HtmlWebpackPlugin({

filename: ‘index.html’,

template: path.join(__dirname, ‘./public/index.html’)

}),

// 自动清除 dist 目录插件

new CleanWebpackPlugin(),

// 配置 vue loader 插件

],

// 配置开启服务器的信息

devServer: {

static: {

directory: path.join(__dirname, ‘dist’),

},

compress: true,

port: 80,

},

performance: {

hints: false

}

}

按照上述配置把对应文件给创建好，如果没有文件就会报错，

安装插件 html-webpack-plugin clean-webpack-plugin

​ 是因为 webpack.config.js 里面有用到

npm i -D html-webpack-plugin clean-webpack-plugin

配置我们的入口文件

在根目录里新建一个 src 的文件夹在里面新建一个 main.js 文件 写入js代码 然后打包后户减少

打包前

function fn() {

console.log(‘孙志豪’)

}

fn()

打包后 会多一个 dist 文件 把 function 去掉了

console.l