webpack.config.js配置/package.json配置文件

51 阅读 0 评论 34 点赞

我是靠谱客的博主眼睛大中心，最近开发中收集的这篇文章主要介绍webpack.config.js配置/package.json配置文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

webpack.config.js配置

在项目所在目录创建一个webpack.config.js配置文件

/*导入path模块*/
const path = require('path');
module.exports = {
/*入口*/
entry: './src/main.js',
/*出口*/
output: {
/*绝对路径，动态获取,第一个参数获取当前文件所在路径，我们要放到dist文件夹下*/
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
}

注意dirname前是双下划线，dir获取的是当前文件所在绝对路径（不包括当前文件名）

path模块resolve动态获取路径

然后直接在项目终端执行,

webpack

就可以打包到指定目录下，指定文件

package.json配置文件

在所在目录下执行

npm init

初始化项目就会创建一个package.json配置文件，可以进行配置相关依赖包

{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
}

我要说的是script这部分内容，上边的scripts里边都对应着一个键和一个值，是一种映射关系，

test对应echo “Error: no test specified” && exit 1指令

build对应webpack指令

上边我们配置webpack.config.js文件通过webpack就可以直接进行打包，我们再次到package.json里设置“build”:”webpack”映射。

在控制台就可以直接使用
npm run build
等价于webpack命令，这里看不出来简便，假如webpack的命令很长，可以直接用一个单词简化命令。npm run +简化的命令。

webpack命令执行是全局的webpack

npm run build会优先找局部的webpack

开发时依赖：只有开发时需要的依赖，比如webpack打包，就是开发时的

运行时依赖：项目上线后所需要的依赖。

安装本地的webpack

在项目目录下

npm install webpack@3.6.0 --save-dev

然后会在目录下生成node_modules文件夹

package.json会增加

"devDependencies": {
"webpack": "^3.6.0"
}

devDependencies开发时依赖

dependencies运行时依赖

–save-dev是开发时依赖，项目打包后不需要使用

只要是终端直接使用webpack就是全局的，除非像上边的脚本‘build’,优先在本地找，如果想使用本地webpack又不想配置映射，要用cd一层层在node_modules文件夹里找到本地webpack,在使用webpack命令。