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

75 阅读 0 评论 50 点赞

我是靠谱客的博主传统水壶，最近开发中收集的这篇文章主要介绍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命令。