本文详细介绍了如何从零配置Webpack来搭建Vue项目，包括打包Vue文件、HTML文件、CSS/LESS样式，以及实现热更新和自动清理旧文件。同时，提到了在Webpack配置中使用vue-loader、html-webpack-plugin、clean-webpack-plugin等插件的重要性，并提供了完整的webpack.dev.js和webpack.prod.js配置示例。
项目文件夹 新建 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
创建main.js入口文件：
import Vue from ‘vue’
import App from ‘./app.vue’
const root = document.crea
最低0.47元/天 解锁文章
2438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
