这篇博客用的是webpack3的版本，作为入门理解学习
非原创，只为学习记录。博客大部分内容引用来源如下：作者：夕阳
链接：来源：掘金著作权归作者所有。如果侵权，立即删除！
前端为什么需要工程化工具？
- 语言多
- 变化快
webpack横空出世。
为什么要用webpack？自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会 导致加载速度变慢。Webpack 最主要的目的就是为了解决这个问题， 将所有小文件打包成一个或多个大文件，官网的图片很好的诠释了这个事情，除此之外，Webpack 也是一个能让你 使用各种前端新技术的工具。作者：夕阳 链接： 来源：掘金
使用 webpack3
mkdir webpack-democd webpack-demo// 创建 package.json，这里会问一些问题，直接回车跳过就行npm init // 推荐这个安装方式，当然你也安装在全局环境下// 这种安装方式会将 webpack 放入 devDependencies 依赖中npm install --save-dev webpack@3
然后按照下图创建文件
// sum.js// 这个模块化写法是 node 环境独有的，浏览器原生不支持使用module.exports = function(a, b) { return a + b} // index.jsvar sum = require('./sum')console.log(sum(1, 2)) //index.htmlDocument
现在我们开始配置最简单的 webpack，首先创建 webpack.config.js 文件，然后写入如下代码
// 自带的库const path = require('path')module.exports = { entry: './app/index.js', // 入口文件 output: { path: path.resolve(__dirname, 'build'), // 必须使用绝对地址，输出文件夹 filename: "bundle.js" // 打包后输出文件的文件名 } } 现在我们可以开始使用 webpack 了，在命令行中输入
node_modules/.bin/webpack
可以发现原本两个 JS 文件只有 100B，但是打包后却增长到 2.66KB.
。因为module.export 浏览器是不支持的，所以 webpack 将代码改成浏览器能识别的样子。即将index.js和sum.js整合到了一个文件里，并输出到bundle.js 现在将 index.html 文件在浏览器中打开，应该也可以看到正确的 log。
我们之前是在文件夹中安装的 webpack，每次要输入 node_modules/.bin/webpack 过于繁琐，可以在 package.json 如下修改
"scripts": { "start": "webpack" }, 复制代码然后再次执行 npm run start，可以发现和之前的效果是相同的。简单的使用到此为止，接下来我们来探索 webpack 更多的功能。
也可以使用npx webpack，npx帮你找本地目录的webpack
用 babel-loader 把 ES6 转译为 ES5
Loader 是 webpack 一个很强大功能，这个功能可以让你使用很多新的技术。
Babel 可以让你使用 ES2015/16/17 写代码而不用顾忌浏览器的问题，Babel 可以帮你转换代码。首先安装必要的几个 Babel 库
npm i --save-dev babel-loader@7 babel-core@6 babel-preset-env 注意：webpack 3.x babel-loader 7.x | babel 6.x 官方文档说 webpack3搭配babel-loader 7和babel 6 如果是版本4 那么webpack 4.x | babel-loader 7.x | babel 6.x
npm install -D babel-loader@7 babel-core babel-preset-env webpack
复制代码先介绍下我们安装的三个库
- babel-loader 用于让 webpack 知道如何运行 babel
- babel-core 可以看做编译器，这个库知道如何解析代码
- babel-preset-env 这个库可以根据环境的不同转换代码
接下来更改 webpack-config.js 中的代码
module.exports = {// ...... module: { rules: [ { // js 文件才使用 babel test: /\.js$/, // 使用哪个 loader use: 'babel-loader', // 不包括路径 exclude: /node_modules/ } ] }} 复制代码配置 Babel 有很多方式，这里推荐使用 .babelrc 文件管理,创建.babelrc 文件。
// ..babelrc{ "presets": ["babel-preset-env"]} 复制代码现在将之前 JS 的代码改成 ES6 的写法
// sum.jsexport default (a, b) => { return a + b} // index.jsimport sum from './sum'console.log(sum(1, 2))//加一句ES6语法let a=1alert(a)
复制代码执行 npm run start，再观察 bundle.js 中的代码，可以发现代码被转换过了，并且同样可以正常 输出3。let也被转换。
当然 Babel 远不止这些功能，有兴趣的可以前往官网自己探索。
用 sass-loader 把 SCSS 转译为 CSS
创建一个CSS文件夹，里面有main.scss
main.scss里写几句SCSS语法的代码 body{ background: red; #app{ width:100px; height: 100px; border:2px solid green; }} 要安装四个loader
npm i --save-dev css-loader style-loader sass-loader node-sass
css-loader 和 style-loader 库。前者可以让 CSS 文件也支持 import，并且会解析 CSS 文件，后者可以将解析出来的 CSS 通过标签的形式插入到 HTML 中，所以后面依赖前者。 然后配置 webpack.config.js：
在rules数组添加一个对象
// webpack.config.jsmodule.exports = { ... module: { rules: [ //要添加的对象 { test: /\.scss$/, use: [ "style-loader", // creates style nodes from JS strings "css-loader", // translates CSS into CommonJS "sass-loader" // compiles Sass to CSS, using Node Sass by default ] } ] }}; 然后在index.js添加代码：
import './CSS/main.scss'引入css的代码。css-loader让css文件也支持引入，因为webpack中把所有的文件都当做模块 然后命令行npx webpack开始编译
可以看到main.scss已经编译完成。
这时查看bundle.js：
bundle.js中.当打开首页的html加载bundle.js时，js中的css代码就会被当做字符串添加到html页面中。 