webpack入门配置步骤详解
1、初始化
1、npm install webpack webpack-cli webpack-dev-server --g 全局安装必要的第三方插件
2、mkdir config dist src 新建三个文件夹
3、npm init -y 初始化package.json
4、在 src 文件夹中，新建 main.js；在 config 文件夹中，新建 webpack.dev.js
配置webpack.dev.js
在 package.json加入快捷命令
执行npm run dev
此时可以看到 dist 文件夹下面已经有bundle.js了
这里特别注意下：文件目录中不要包含中文，否则会引起很多的问题
2、多文件入口
如果存在多文件入口，则需要1添加入口文件、2配置入口文件，3修改出口文件的filename为[name].js
执行npm run dev 后
在 dist 文件夹中出现了同名的两个js文件
[name]会根据入口文件的名称，打包成相同的名称，有几个入口文件，就打包几个文件
3、配置webpack-dev-server
作用：配置本地的服务器，它的基本配置是
这个时候如果执行npm run dev会报错，需要在package.json里配置
然后执行npm run server就可以跑起来了
我们可以填写下文件，看下输出效果
1、在dist文件夹下新建index.html，引入2个js文件
2、在js文件中分别写点东西
3、再次执行npm run server，打开localhost:9000
4、引入CSS
webpack 中的 loaders 是可以将浏览器无法识别的文件转化，比如可以把 SASS/LESS 文件的写法转换成 CSS，可以把ES6、ES7转换成ES5，首先我们在src文件夹下创建index.css文件并在入口文件中引入：
执行命令，发现报错
这是因为在webpack中想要打包css，通常需要加载 style-loader 和 css-loader 这2个加载器，它们的作用是：
css-loader：加载css文件style-loader：动态创建style标签，塞到html的head标签里；
安装依赖：
cnpm install style-loader css-loader --save-dev
配置loaders：
执行命令，显示成功：
5、插件--压缩JS
webpack内置 uglifyjs-webpack-plugin的插件，直接引入配置
再次执行命令，文件已被压缩
6、插件--打包HTML
之前的HTML是我们手动写的，现在删除之前的JS引入，移动至src文件夹下面
现在的目标是：webpack 让 html 自动引入js，并打包到 dist 文件夹下，这里就要引入 html-webpack-plugin
安装依赖： cnpm install --save-dev html-webpack-plugin
配置plugins：
执行命令，可以看到 dist 文件夹下面已经有打包好的html了
7、SASS文件的打包
安装依赖：cnpm install node-sass sass-loader --save-dev
在原来的基础上，新增配置
新建sass文件
引入sass文件
执行命令，效果生效：
8、增加babel支持
babel主要是用于将es6/es7转为浏览器可识别的js
安装依赖：cnpm install --save-dev babel-core babel-loader babel-preset-env
配置加载器：
编写文件：
打包代码执行成功
番外话
webpack的核心概念就是，一切皆模块，从一个入口开始，不停的分析解析最终获取到一个浏览器可识别的js文件
核心是，解析浏览器无法识别的文件的loaders，帮助自动化打包构建的插件plaugins
剩下的就是按要求进行配置的
部分基础知识点
__dirname表示当前文件所在的目录
__filename表示正在执行脚本的文件名
path.resolve([...paths]) 可以将路径或者路径片段解析成绝对路径，...paths是传入的字符串参数，是路径序列或者路径片段
本文内容主要摘自于 “https://www.jianshu.com/p/6712e4e4b8fe”
