webpack+vue搭建vue项目

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

webpack+vue搭建vue项目_第1张图片
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文件


webpack+vue搭建vue项目_第2张图片
新建如下文件

4、配置webpack build和dev


配置build和dev

在项目路径下输入 npm run dev 

然后在我们浏览器打开 :localhost:8000


webpack+vue搭建vue项目_第3张图片
最终效果

一个基于webpack的基本项目我们就已经搭建好了,写的很简单,但是所有配置我都贴出来了,整个项目已经上传到了我的github源码地址

你可能感兴趣的