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.搭建项目目录

├── 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

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

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脚本

"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所以不会有上面那些问题。如下：

现在版本：
"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项目