1 新建一个vue项目。
首先我们使用新建一个目录 wue-webpack-test
在项目目录下输入一下命令npm init ,初始化为一个npm项目
然后编辑我们的package.json如下，最后我们使用npm install命令来完成依赖安装。
```json
{
"name": "vue-webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"webpack-cli": "^3.3.0"
}
}
```
2 完成webpack配置
在src新建webpack.config.js
```javascript
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const htmlPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV ==='development'
const config = {
target:"web",
entry: path.join(__dirname, 'src/index.js'),
output: {
filename:'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test:/\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test:/\.(gif|jpe|jpeg|png|svg)$/,
use: [
{
loader:"url-loader",
options: {
limit:1024,
name:'[name]-imi.[ext]'
}
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env':{
NODE_ENV : isDev ?'"development"' :'"production"'
}
}),
new VueLoaderPlugin(),
new htmlPlugin()
]
}
if (isDev) {
config.devtool ='#cheap-module-eval-source-map'
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay: {
errors:true,
},
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config
```
3 新建src目录 ./src/app.vue文件 ./src/asserts/styles/test.css文件
4、配置webpack build和dev
在项目路径下输入 npm run dev
然后在我们浏览器打开 ：localhost:8000
一个基于webpack的基本项目我们就已经搭建好了，写的很简单，但是所有配置我都贴出来了，整个项目已经上传到了我的github源码地址
