由浅入深学习webpack+vue全家桶，实现知乎日报--webpack建立基本项目步骤（第一节）认识webpack和webpack-dev-server

时间 2021-08-14

标签 html vue node webpack web npm json windows 浏览器 app 栏目应用数学繁體版

原文原文链接

开始以前：html

1.安装node环境vue

2.安装npm或者cnpm（我使用的是npm）node

3.编辑器使用VSCodewebpack

4.浏览器使用Chromeweb

*经过npm或者cnpm安装的依赖，请务必注意版本号！！！太高或者太低的版本都有可能致使运行不成功！npm

1.新建zhihu-daily目录（如下简称根目录）并在VSCode中打开该目录，使用“ crtl+` ”打开终端。在终端内输入：json

npm initwindows

按回车之后，终端面板会提示输入name、version、description、entry point、author等信息，能够修改相应的描述，也能够所有点回车表示默认输入，而后目录下会自动生成一个package.json文件。浏览器

*注意：name不能够出现大写英文字母，不然会报错。app

{

"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.一、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的区别

做者：Waitingforyu 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。