vue26 —— webpage使用 -- 配置

最新推荐文章于 2024-12-16 18:01:11 发布

原创最新推荐文章于 2024-12-16 18:01:11 发布 · 940 阅读

1 ·

CC 4.0 BY-SA版权

vuejs 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何在Vue项目中配置package.json和webpack.config.js，包括通过npm init生成package.json，设置入口和出口，以及使用npm run build简化打包命令。详细讲解了每个步骤的作用和操作方法。

在这里插入图片描述

1. 生成package.json文件

需要使用到package.json
通过npm init 生成

终端进入到对应文件夹，执行npm init
package name: (02-配置) meetwebpack （直接敲回车默认使用括号内的名字，但有中文不支持）
… 省略部分皆直接回车
entry point: (webpack.config.js) index.js (没必要用webpack.config.js做入口文件，暂时随便写一个，目前用不上）

1.1 package.json 文件内容

项目需要单独依赖node环境时需要，告诉我们当前项目的一些信息

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"  // 开源时需要，不开源不需要，可删除
}

1.2 npm install

当webpack.json中还有一些依赖的东西时，需要在终端执行 npm install
生成一个 package-lock.json

2. 创建webpack.config.js文件，映射出入口

原先打包时要执行 webpack ./src/main.js ./dist/bundle.js ，命令太长
现在要执行 webpack 实现上述功能

在 02-配置文件夹下创建 webpack.config.js
（暂时只能使用这个名字）
通过CommonJs导出一个对象

module.exports = {
  
}

对象内容包含：对应的入口及出口

module.exports = {
  entry: '',
  output: 
}

执行 webpack时，会自动找到 webpack.config.js , 找导入口和导出口，有就读取入口和出口

//1.导入模块path
//注意不是 './path'； 会去node对应的包里找path （npm init）
const path = require('path')  

module.exports = {
  entry: './src/main.js',
  output: {
    // 这里的绝对路径path 需要动态获取,需要用到node里面的语法
    // 1. 导入模块path
    // 2. 拼接路径：使用resolve函数； __dirname是node上下文的全局变量，存放当前文件(webpack.config.js)所在的路径
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  }
}

此时，再执行webpack即可完成打包

3. 再做一层映射，使用npm run build命令取代webpack命令

在package.json文件中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 添加
  },

package.json中的scripts脚本在执行时，会按照一定顺序寻找命令对应的位置：

首先，找本地的node_modules/.bin 路径中对应的命令
若没有找到，去全局环境变量中找

执行 npm run build ，会进入package.json 找到 “scripts” 下面的 ”build“，执行”build“的值

	...02-配置>npm run build
	会把build的值放到终端执行，相当于： 
	...02-配置>webpack
	
	但与直接执行webpack不同 ： 
		直接执行webpack会在执行全局webpack
		通过npm run build 执行webpack ，会优先执行本地webpack
	全局webpack 和 局部webpack版本可能不同，因为不同的项目可能会依赖不同的webpack版本

安装局部webpack

	...02-配置>npm install webpack@3.6.0 --save-dev

安装完成后 package.json文件多出下面代码

"devDependencies": {  //开发时依赖
    "webpack": "^3.6.0"
  }

开发时依赖： --save-dev。 webpack就是，打包完后就不需要用到webpack了

运行时依赖