webpack@3简单使用
这篇博客用的是webpack3的版本，作为入门理解学习
非原创，只为学习记录。博客大部分内容引用来源如下：
作者：夕阳
链接：https://juejin.im/post/59bb37...
来源：掘金
著作权归作者所有。
如果侵权，立即删除！
前端为什么需要工程化工具？
- 语言多
- 变化快
webpack横空出世。
webpack：从入门到真实项目配置（注意文中作者配置的是webpack@3）————掘金
为什么要用webpack？
自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主要的目的就是为了解决这个问题，将所有小文件打包成一个或多个大文件，官网的图片很好的诠释了这个事情，除此之外，Webpack 也是一个能让你使用各种前端新技术的工具。作者：夕阳 链接：https://juejin.im/post/59bb37... 来源：掘金
使用 webpack3
mkdir webpack-demo cd 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.js
var sum = require('./sum')
console.log(sum(1, 2))//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build/bundle.js"></script>
</body>
</html>现在我们开始配置最简单的 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.js
export default (a, b) => {
return a + b
}// index.js import sum from './sum' console.log(sum(1, 2)) //加一句ES6语法 let a=1 alert(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：官网在这里Sass Loader
在rules数组添加一个对象
// webpack.config.js
module.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：
发现css代码已经在bundle.js中.当打开首页的html加载bundle.js时，js中的css代码就会被当做字符串添加到html页面中。
