webpack初体验

这段时间开始使用vue做项目，但是vue的生态圈过于庞大，对小白来说，周边知识不搞清楚，就只会复制黏贴。刚好最近在刷慕课网上的课程：https://www.imooc.com/video/16402 就是讲webpack+vue的，看着挺好的。所以抽空去看了下webpack的中文文档，现这篇文字就当一个mark。
首先：webpack的中文文档传送门：https://www.webpackjs.com/concepts/

1、webpack说的再牛逼，其实说白了，也就是个静态模块的打包器（module bundler）
2、webpack的四大核心：
a.入口（entry）
b.输出（output）
c.loader
d.插件（plugin）

一、入口/出口

//webpack.config.js
const path=reqiure('path')//这是es6的写法，叫做解构赋值
module exports={
    entry:path.join('__dirname','src/index.js'),//entry就是一个文件名
    output:{
        filename:bundle.js,
        path:path.join('__dirname','dist')
    }
}
//__dirname是nodejs里面，表示当前目录的一个变量
//这是慕课网上的代码，官方文档给出的是path.resolve('')
//output.filename和output.path属性
//[]数组，{}对象

为了搞清楚path.join和path.resolve的区别，特意百度了一下：
直接摘抄https://www.cnblogs.com/philipding/p/7773022.html
1. 对于以/开始的路径片段，path.join只是简单的将该路径片段进行拼接，而path.resolve将以/开始的路径片段作为根目录，在此之前的路径将会被丢弃，就像是在terminal中使用cd命令一样。

path.join('/a', '/b') // 'a/b'
path.resolve('/a', '/b') // '/b'

1. path.resolve总是返回一个以相对于当前的工作目录（working directory）的绝对路径。

path.join('./a', './b') // 'a/b'
path.resolve('./a', './b') // '/Users/username/Projects/webpack-demo/a/b'

答案：慕课网上那段代码，不管是path.join还是resolve都可以使用。只是说join就是路径拼接，可以连接多个参数。而resolve作为路径解析，会更加偏重于生成规范化点的路径名称。
放上一组对比图：

const path = require('path'); 
let myPath = path.join(__dirname,'/img/so'); 
let myPath2 = path.join(__dirname,'./img/so'); 
let myPath3 = path.resolve(__dirname,'/img/so'); 
let myPath4 = path.resolve(__dirname,'./img/so'); 
console.log(__dirname); //D:\myProgram\test 
console.log(myPath); //D:\myProgram\test\img\so 
console.log(myPath2); //D:\myProgram\test\img\so 
console.log(myPath3); //D:\img\so<br> 
console.log(myPath4); //D:\myProgram\test\img\so

二、loader
webpack本身只能理解js文件。而不同的loader对应不同的非javascript文件，转换为webpack能处理的有效模块。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
loader的基本配置：

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { 
          test: /\.txt$/, //以txt结尾的正则表达
          use: 'raw-loader' //需要先安装该loader
      }
    ]
  }
};

module.exports = config;

三、插件
如果说loader是用来转换类型的模块，那么plugin则可以用于更广泛范围的任务。比如打包优化、压缩甚至包括重新定义环境中的变量。

附注：
1、npm i –save-dev和–save的区别
https://blog.csdn.net/juzipchy/article/details/65653683（来源）

npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 js的压缩包gulp-uglify 时，我们采用的是 “npm install –save-dev gulp-uglify ”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。

另外需要补充的是：
正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

{
 "dependencies": {
    "vue": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-latest": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^11.1.4",
    "vue-template-compiler": "^2.2.1",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

至此，webpack的一些核心功能理解的差不多。
但还是有一些周边的专业名词，都是一知半解的态度。
比如commonJS、ES6、TypeScript等一系列的。
推荐理解：
commonJS：https://blog.csdn.net/u012443286/article/details/78825917

还有比如解析、配置、缓存、依赖等，也是很值得深入研究的。