webpackGettingStart

摘要：一基础配置在这个文件进行我们打包的配置项，这个文件是的默认配置文件可以作为自定义配置如果不填写直接打包会不走默认配置。

一、webpack 基础配置

1.webpack.config.js
  在这个文件进行我们打包的配置项，这个文件是webpack的默认配置文件可以作为自定义配置（如果不填写直接打包会不走默认配置）。
  如果想要多带带使用自己命名字文件打包可以运行 npx webpack config xxx.js，指向自定义打包配置文件
  配置参数：
  entry:"./index.js" //入口文件 你想要打包的文件
  const path = require("path");
  module.exports={
      //打包环境 production 打包生产代码压缩，development开发环境
      mode:"development",
      //入口文件
      entry:{
          main:"./index.js"
      },
      //输出文件
      output:{
          filename:"main.js",//输出文件名字
          //__dirname：node中全局变量，存储的是文件所在的文件目录
          //引入的path是nodejs的核心方法
          ／／http://nodejs.cn/api/path.html#path_path_resolve_paths
          //path.resolve() 方法将路径或路径片段的序列解析为绝对路径
          path:path.resolve(__dirname,"jkDist"),//输出文件夹位置和文件夹名字
          publicPath:"./"//基础资源路径应以 ／结尾
      }
  }
  
  当运行npm run dev的时候：
  devServer会将资源打包好放到计算机内存，然后先访问内存资源（devServer的publicPath配置决定，如果devServer中publicPath省略，会读取output中的publicPath）的index.html，访问不到就会去本地目录（ devServer的contentBase配置决定）查找index.html。

二、package.json

1.初始配置
    {
    "name": "webpack-demo",//项目名称
    "version": "1.0.0",//版本号
    "description": "",//描述
    "private": true,//项目是否私有的，不希望发布在npm管理平台
    "main": "index.js",//对外暴露的入口文件，一般不独立项目不写
    "scripts": {//webpack 命令
      "test": "echo "Error: no test specified" && exit 1",
      "dev": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {//本地开发依赖的模块
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}//生产所依赖的模块
  }

--by JK 2019 06 11 学习笔记