手动搭建vue工程的环境

最新推荐文章于 2024-09-03 11:14:22 发布

置顶深知的知深

最新推荐文章于 2024-09-03 11:14:22 发布

阅读量925

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/zhusixu/article/details/83820840

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.webpack基础配置
1.确保安装了最新版本的node和npm。
2.首先，创建一个目录，如demo，使用npm初始化配置（如果npm太慢，可以使用cnpm）：

npm init

执行后，会出现一系列选项，可以按回车键快速确认，完成后，在demo目录下会生成package.json文件
3.把webpack包安装到node_modules目录中

npm install webpack --save-dev

安装成功后，package.json中多了一项配置，并且demo目录下会有node_modules文件夹

"devDependencies": {
    "webpack": "^4.25.1",
  }

4.然后安装webpack-dev-server，他可以提供很多服务，比如启动一个服务器，热更新，接口代理等，同样在本地局部安装：

npm install webpack-dev-server --save-dev

安装完成后，package.json中内容：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-dev-server": "^3.1.10"
  }
}

5.在demo目录下创建webpack.config,js文件：

var config = {
}
module.exports = config;

注：这里的module.exports = config，相当于export default config。因为没有安装es6编译插件，不能用es6语法，否则会报错。
6.之后在package.json的scripts里添加一个快速启动webpack-dev-server服务的脚本：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --open --config webpack.config.js"
  }

当运行npm run dev 命令时，就会执行webpack-dev-server --open --config webpack.config.js命令。其中–config是指向webpack-dev-server读取配置文件路径，–open会在执行命令时自动在浏览器打开网页，默认地址是127.0.0.1:8080，不过ip和端口都可以配置，比如：

 "dev":"webpack-dev-server --host 172.172.172.1 --port 8082  --open --config webpack.config.js"

这样访问地址就改为172.172.172.1:8082。一般在局域网下，需要额让其他同事访问可以这样配置，否则用localhost就可以。
7.webpack配置中最重要也是必选两项是入口和出口。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件存储位置和文件名。在demo目录下新建一个空的main.js作为入口的文件，然后在webpack.config.js中进行入口和输出的配置：

var path = require('path');
var config = {
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    }
}
module.exports = config;

entry中的main就是配置的单入口，webpack会从main.js文件开始工作。output中path选项用来存放打包后文件的输出目录，是必填项。publicPath指定资源文件引用的目录。filename用于指定输出文件的名称。因此，这里配置的output意为打包后的文件会存储在demo/dist/main.js文件，只要在html引用他就可以了。
8.在demo目录下，新建index.html作为spa入口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
    <div id="app">
        hello world
    </div>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

在终端执行下面命令，浏览器就会自动打开页面：