webpack@3简单使用

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

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

如果侵权,立即删除!

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

  1. 语言多
  2. 变化快

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.jssum.js整合到了一个文件里,并输出到bundle.js

现在将 index.html 文件在浏览器中打开,应该也可以看到正确的 log。

我们之前是在文件夹中安装的 webpack,每次要输入 node_modules/.bin/webpack 过于繁琐,可以在 package.json 如下修改

"scripts": {
    "start": "webpack"
  },

复制代码然后再次执行 npm run start,可以发现和之前的效果是相同的。简单的使用到此为止,接下来我们来探索 webpack 更多的功能。

也可以使用npx webpacknpx帮你找本地目录的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.scssmain.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-loaderstyle-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页面中。

这个项目的github

这个项目的github

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏网络

那些年,我们用过的fiddler

在测试中,不管是做手工测试,还是接口测试,我们都需要查看后端返回的数据。有的时候,我们也需要调试,或者mock一下后端的返回,来验证前端是否达到预期。 为了捕获...

18310
来自专栏Java学习123

fiddler2抓包工具使用图文教程

9726
来自专栏FreeBuf

前端黑魔法之远程控制地址栏

由于今天看到一篇文章《危险的 target=”_blank” 与 “opener”》,里面提到了一个老知识点,就是target=”_blank”的时候,新打开的...

3544
来自专栏魏艾斯博客www.vpsss.net

WordPress 后台编辑主题无“更新文件”按钮的解决办法

1222
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【6.2 HTML视图模板】

天下难事必作於易。天下大事必作於细。是以圣人终不为大,故能成其大 ——老子《道德经》

1502
来自专栏dotnet & java

WCF入门学习(4)

上一篇的学习中碰到一个问题,用地址http://localhost:8080/mex 访问元数据的时候一直提示400 bad request 错误,因为时间太晚...

974
来自专栏抠抠空间

Linux上安装pip以及setuptools

2090
来自专栏分享达人秀

熟悉Android Studio界面,开始装逼卖萌

通过前两期的学习,我们可以正确搭建好Android Studio的开发环境,也创建了HelloWorld工程并成功运行,那么本期就带你一起来了解这款强大...

3296
来自专栏大前端开发

使用mpvue开发小程序教程(一)

前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的(重写了其runtime和compi...

1695
来自专栏前端小叙

微信公众号复制的图片可以正常显示的办法

通过浏览多方文章,找到了一个 非常好用但是也有很大的坑的办法: 在页面中加meta: <meta name="referrer" content="never"...

1.8K9

扫码关注云+社区