webpack手动搭建vue项目（一）—— 安装环境和基础配置

1.安装node和webpack

   安装node教程很多都有这里就不详细说了，参考菜鸟教程，本人用的node版本为v8.11.2,npm版本为5.6.0,后面安装webpack，输入npm install webpack -g ，安装完成后输入webpack  -v查看版本，如果输出说明安装成功。

2.创建项目目录生成配置

1.首先创建目录

   > mkdir projectName

2.创建一个package.json 文件

> cd projectName

> npm init

一直按enter键，生成package.json文件

3.添加webpcak

> npm install webpack  --save-dev

4.搭建项目目录

[code]├── build/                      # webpack config files
│   |
|   |----webpack.base.js
|   |----webpack.dev.js
|
├── src/
│   ├── index.js                 # app entry file
|   |----view
|   |    └── index.html         # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

4.创建webpack.base.js

[code]const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname,'../dist'),
filename: 'compiled/js/[name]-[hash:8].js',
chunkFilename: 'compiled/js/[name]-[chunkhash:8].js'
},
plugins: [
new htmlWebpackPlugin({
template: './src/view/index.html',
hash: true
})
]
}

5.创建webpack.dev.js

[code]const merge = require('webpack-merge')
const common = require('./webpack.base')
const path = require('path')

module.exports = merge(common, {
devtool: 'source-map',
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true,
host: '0.0.0.0',  // 一般设置为0.0.0.0 可以供localhost访问和供别人ip访问
port: 8015,  // 端口
open: true, // 自动打开浏览器
compress: true,
proxy: {
'/matchName': {
target: 'http://www.baidu.com',  // 代理目标地址
pathRewrite: {'^/matchName': '/matchName'}
}
}
}
})

6.安装剩余依赖

> npm install html-webpack-plugin webpack-dev-server webpack-merge --save-dev

7.补充package.json脚本

[code]"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config build/webpack.dev.js",
"dev": "webpack-dev-server --config build/webpack.dev.js"
},

然后运行npm run dev

如果报错：

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli

需要先执行：> npm install webpack-cli -g  > npm install webpack-cli --save-dev

然后就可以愉快的跑起来了！

8.总结

后面报错是因为webpcak4升级的原因，需要安装webpack-cli,本人之前用的版本是webpcak3.3.0所以不会有上面那些问题。如下：

[code]现在版本：
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1"
}
以前版本：
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1",
"webpack-merge": "^4.1.1"
}

webpack手动搭建vue项目（二）—— 创建vue+elementui项目