开始之前：
1.安装node环境
2.安装npm或者cnpm（我使用的是npm）
3.编辑器使用VSCode
4.浏览器使用Chrome
*通过npm或者cnpm安装的依赖，请务必注意版本号！！！过高或者过低的版本都有可能导致运行不成功！
1.新建zhihu-daily目录（以下简称根目录）并在VSCode中打开该目录，使用“ crtl+` ”打开终端。在终端内输入：
npm init
按回车以后，终端面板会提示输入name、version、description、entry point、author等信息，可以修改相应的描述，也可以全部点回车表示默认输入，然后目录下会自动生成一个package.json文件。
*注意：name不可以出现大写英文字母，否则会报错。
{
"name": "zhihu-daily",
"version": "1.0.0",
"description": "zhihu-daily based on webpack and vue",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "h_xingzhiyuan@163.com",
"license": "ISC"
}
在终端内输入：
npm install webpack --save-dev
安装webpack依赖，成功以后会在根目录出现一个"node_modules"文件夹，这个文件夹保存了工程的所有依赖，以后通过npm安装的依赖全部保存在该文件夹下。
2.在根目录下新建webpack.config.js文件，这个文件用来保存webpack打包的基本配置信息，代码如下：
var path = require('path');
var config = {
entry: {
main: './index'
},
output: {
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js'
}
}
module.exports = config;
3.在根目录下创建一个index.html文件，代码如下：
Document
Document <!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> Hello World! </div> <script src="/dist/index.js"></script> </body> </html>
4. 在根目录下新建一个index.js文件，用来演示"页面加载完成后，延迟5秒修改#app内容"的效果，代码如下：
setTimeout(() => {
document.getElementById('app').innerHTML = 'Hello Webpack And Vue!';
}, 5000);
5.为了创建本地运行环境，我们需要安装webpack-dev-server，该服务可以在本地搭建一个运行环境，在浏览器地址栏输入"localhost:8080"就可以看到我们通过webpack打包生成的页面效果。在终端输入：
npm install webpack-dev-server --save-dev
然后修改package.json文件，在scripts属性下新加"dev"属性，该属性包括了配置运行webpack-dev-server时的配置信息，如：
--open代表自动打开浏览器。
--host 0.0.0.0代表运行的域名可以输入127.0.0.1、locallost、本机ip，如果不配置默认是localhost，也可以通过127.0.0.1访问，但是不能通过本机ip访问。
--port 8888代表运行的端口号是8888，如果不配置则默认是8080。
代码如下：
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --host 0.0.0.0 --port 8888 --config webpack.config.js"
},
...
*注意：json文件不能写注释，而且属性名、值需要用双引号包裹。
6.在终端内输入：
npm run dev
运行成功以后会自动打开默认浏览器，但是由于我们设置的域名是"0.0.0.0"，导致在浏览器中出现"0.0.0.0:8888"页面加载错误，那么手动改一下域名为127.0.0.1（或者localhost、本机ip）就可以出现我们刚才所写的效果（此情况出现在windows环境下，mac正常）：页面加载完成显示"Hello World!"，5秒后变为"Hello Webpack And Vue!"。
总结：
（1）在npm init时，name不能有大写字母出现
（2）在npm init时，如果main选项不默认是index.js，那么在webpack.config.js中也需要将entry.main选项配置为"./自定义名字"
（3）在安装依赖的时候，如果不指明版本号（如：npm install webpack-dev-server），那么node会根据本地的npm版本安装相应的依赖，这样可能会导致运行出错，所以当出现由于版本错误导致的运行出错问题时，可以通过npm remove xx将该依赖删除，再通过npm install XXX@version（如：npm install webpack-dev-server@2.4.2）进行指定版本的安装
（4）npm install XXX --save-dev与npm install XXX --save的区别，详情请参照npm install XXX --save-dev与npm install XXX --save的区别
完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily
网友评论