社区首页 >专栏 >webpack@3简单使用

webpack@3简单使用

代码之风

发布于 2018-10-31 03:21:46

1K00

代码可运行

文章被收录于专栏：马涛涛的专栏马涛涛的专栏

运行总次数：0

代码可运行

这篇博客用的是webpack3的版本，作为入门理解学习 非原创，只为学习记录。博客大部分内容引用来源如下：

作者：夕阳来源：掘金著作权归作者所有。

如果侵权，立即删除！

前端为什么需要工程化工具？

语言多
变化快

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.xnpm 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
            ]
        }
        ]
    }
};