Webpack初体验
官网文档
https://www.webpackjs.com/concepts/
推荐学习视频
http://biaoyansu.com/i/6593029250131（Webpack精讲 - 表严肃讲Webpack）
这个视频适合初次接触webpack的朋友学习，这个网站里面其他的视频也很好，个人非常喜欢这个老师声音和风格，嘻嘻..
是什么？
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
其实，他就是一个模块打包器。
为什么？
为了实现模块化，解决共同使用的方法无法共享的问题。
有次面试的时候，面试官问到我的项目，js文件都是怎么规划的，如果有些方法是被多次调用的，你是怎么做的？what？？？那时候的我还只会一个html引一个js文件，多次调用怎么办？一边写代码一边心里纳闷，js文件里的方法怎么不能互相调用呢？能把那些方法共享就好了。那时候的我对前端一无所知，虽然现在也是小白，不知道webpack这么好的东西，也不了解模块化的具体意义，很当然的我失去了那次实习机会。
怎么用？
当我跟着视频学习的时候，发现总是出错，上网问了百度的老师们，才知道是3.0的旧版本与现在用的4.0+的新版本是有一些区别的。所以为了自己更好的理解，我分了旧版本和新版本的两部分来学习。
安装及配置（3.0版本）
一、新建一个项目，进行初始化，这里是会生成一个package.json文件。
npm init -y二、安装，不建议进行全局安装，很容易发生版本冲突。
npm i [email protected] -D生成下面部分（package.json文件内）
"devDependencies": { "webpack": "^3.0.0" }
三、使用
命令行输入下面命令，将a.js 打包为 bundle.js。
注意：是 " \ " （斜杠的方向）
node_modules\.bin\webpack a.js bundle.js成功后，html文件便可以对bundle.js文件进行引用。
四、entry和output
建一个webpack.config.js文件，在里面进行出口和入口及其他配置，简化打包过程：
/* 定义出口文件和入口文件 */
module.exports={
entry:'./a',
output: {
filename: "bundle.js",
path: __dirname
}
}然后在package.json中的 scripts 加入如下属性：（注意这里的斜线与上面的不同了！！！！）
"pack": "node_modules/.bin/webpack"从此，不必再写 “node_modules\.bin\webpack a.js bundle.js” 这一大串进行打包了！只需要在命令行输入：
npm run packwebpack就帮你把a.js打包好啦！
五、如何共享方法和属性
（node语法）
/* base.js文件 暴露了一个open属性*/
var open=true;
module.exports={
open: open,
} /* a.js通过require 获得其暴露出来的属性open */
var base=require('./base');
var open=base.open;
if(open){
document.body.innerHTML=`登陆`
}else{
document.body.innerHTML=`????`
}（ES6语法）
/* base.js 暴露open 属性 */
export {open}
/* a.js 拿取base.js中暴露出的open 属性 */
import {open} from './base';安装及配置（4.0+版本）
一、新建一个项目，进行初始化，这里是会生成一个package.json文件。
npm init -y二、安装，不建议进行全局安装，很容易发生版本冲突。（webpack默认最高版本安装）
npm i webpack -D生成下面部分（package.json文件内）
"webpack": "^4.28.1"继续安装webpack-cli
npm install webpack-cli -D三、设置模式
配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，
在命令行输入：
webpack --mode development四、创建入口文件
1、webpack4.x以'./src/index.js'作为入口，所以我们新建一个src文件夹，并在里面创建一个index.js文件。
2、webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者
webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目
录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行
webpack --mode production。这样便能够实现将'./src/index.js'打包成'./dist/main.js'。
不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：
"dev":"webpack --mode development",
"build":"webpack --mode production"以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行
webpack --mode production。
我们在根目录执行：
npm run dev
总结：
1、创建工程目录；
2、初始化工程目录：npm init。
3、局部安装webpack。
4、局部安装webpack-cli。
5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。
6、在webpack –mode development/production可串联设置其他参数。
最后感谢这位博主老师，webpack4.x开发环境配置，大家可以看这一份。
https://blog.csdn.net/u012443286/article/details/79504289