本文详述了从零开始配置Webpack Vue项目的步骤，包括打包Vue文件、HTML文件、清理旧文件、处理LESS样式，以及设置热更新。通过安装和配置相关插件，如vue-loader、html-webpack-plugin和clean-webpack-plugin，实现完整的Webpack配置。此外，文章还提到了项目实践中的热更新和自动化清理过程。
项目文件夹 新建 webpack.dev.js配置
module.exports={
entry:{
index:‘./src/main.js’,
},
output:{ //导出文件配置
path:path.join(__dirname,‘dist’), //目录文件夹
filename:‘bundle.[hash].js’ //打包后的文件名 加一串hash用于版本控制
},
mode:“development”, //开发环境
module:{
rules:[
{
test:/.css$/,
loader:‘style-loader!css-loader’
},
{
test:/.(png|svg|jpg|gif)$/,
use:[
‘file-loader’
]
},
{
test:/.(woff|woff2|eot|ttf|otf)$/,
use:[
‘file-loader’
]
},
{
test:/.js$/,
use:‘babel-loader’
},
]
},
}
配置：
const webpack = require(‘webpack’)
plugins:[
new webpack.HotModuleReplacementPlugin() 插件引入
],
//devServer配置
devServer:{
contentBase:‘./dist’,
hot:true
}
package.json修改：
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack --config webpack.prod.js”,
“dev”: “webpack-dev-server --config webpack.dev.js --open” //热更新
},
运行npm run dev 入口项目自动打开 更改数据刷新后即可看到变化
打包vue文件：
npm i vue-loader vue-router vue-template-compiler vuex vue
webpack.prod.js 和 webpack.dev.js 里面配置：
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
{
test:/.vue$/,
loader:‘vue-loader’
}
plugins:[
new VueLoaderPlugin()
],
src下面新建app.vue
最低0.47元/天 解锁文章
扫一扫
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
