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 学习笔记