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?
然后在我們?yōu)g覽器打開 ：localhost:8000
一個基于webpack的基本項目我們就已經(jīng)搭建好了，寫的很簡單，但是所有配置我都貼出來了，整個項目已經(jīng)上傳到了我的github源碼地址
