一步一步webpack,webpack的学习入门

时间: 2017-11-22阅读: 677标签: webpack

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

webpack的功能与grunt和gulp都是基于node的,所以希望你有一个node基础,如果还没有,那么先学习一下node吧,这是阮一峰的教程,很不错,不过还需要多了解node的API,可以访问官网学习

一、webpack安装

webpack通过npm安装(安装完node之后npm也一起打包安装好了),全局安装命令如下:

$ npm install -g webpack

全局安装之后你就可以随处使用webpack这个命令,也可以本地安装(切换到项目目录内安装):

$ npm install webpack --save-dev

本地安装完毕你并不能用webpack命令,因为shell不知道有这个命令,你还需要把你本地的注册到环境变量或者通过软连接ln -s命令链接到/usr/local/bin/下,才能使用这个命令。当然通过直接执行本地安装的webpack也是可以的,不过要敲不少的路径,很麻烦,像这样:

$ node_modules/.bin/webpack

不如全局安装,然后这样执行方便啊

$ webpack

二、webpack运行需要的要求

webpack运行还需要一个文件,默认名为:webpack.config.js的文件,他的主要作用就是告诉webpack运行之后干什么,从哪找源码,用什么手段处理,处理完之后放到哪,必不可少的。当你运行webpack命令的时候,他默认就会读取这个文件,如果你有多个配置文件,可以通过如下命令告诉webpack

$ webpack --config XXX.js

三、webpack运行方法

运行方法刚才不是说了吗?其实我们通过webpack运行webpack.config.js文件可以执行我们的工程,还有一个方法,就是通过node来执行我们的webpack,像这样(这一块了解了解):

$ node webpack-node.js

webpack-node.js:

var webpack = require('webpack');

webpack({
// 入口文件,也就是源文件,我们要对src/js/page/index.js进行处理
    entry: {
        index: './src/js/page/index.js'
    },
    // 处理完输出到dist/js/page目录下,文件名为index.js,这个[name]是指entry.index
    output: {
        path: 'dist/js/page'
        , filename: '[name].js'
    },
    module: {
        //加载器配置,这里用到了npm的其它模块style-loader,css-loader,jsx-loader,sass-loader,url-loader,其中'-loader'是可以省略的,多个loader之间用!链接,loader之后的?是参数,具体看各个loader的要求了.
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'}
            , {test: /\.js$/, loader: 'jsx-loader?harmony'}
            , {test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
            , {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: process.cwd()                             //绝对路径,alias模块的查找目录
        , extensions: ['', '.js', '.json', '.scss']     // 通过require的时候可以省略这些扩展名
        , alias: {                                      // 别名require('resetCss')代表require(process.cwd+'src/css/reset.scss');
            resetCss: 'src/css/reset.scss',
            allComponentCss: 'src/css/allComponent.scss'
        }
    }
}, function (err, stats) {
    if (!stats.hasErrors()) {
        console.log('编译成功')
    }
});

也就是说,webpack除了可以直接用命令来执行,通过node也可以融合到后端进行开发。

四、webpack.config.js简要说明

这个配置文件怎么写呢,我们都知道,要想使用一个东西,就要遵守它的约定,不然它可不懂你要干什么。如果学习了node,我们知道node的模块开发是遵循CommonJS的,webpack也是这样,因此这个配置文件看起来是这样的:  

module.exports = {
    // 入口文件,也就是源文件,我们要对src/js/page/index.js进行处理
    entry: {
        index: './src/js/page/index.js'
    },
    // 处理完输出到dist/js/page目录下,文件名为index.js,这个[name]是指entry.index
    output: {
        path: 'dist/js/page'
        , filename: '[name].js'
    },
    module: {
        //加载器配置,这里用到了npm的其它模块style-loader,css-loader,jsx-loader,sass-loader,url-loader,其中'-loader'是可以省略的,多个loader之间用!链接,loader之后的?是参数,具体看各个loader的要求了.
        loaders: [
            {test: /\.css$/, loader: 'style-loader!css-loader'}
            , {test: /\.js$/, loader: 'jsx-loader?harmony'}
            , {test: /\.scss$/, loader: 'style!css!sass?sourceMap'}
            , {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: process.cwd()                             //绝对路径,alias模块的查找目录
        , extensions: ['', '.js', '.json', '.scss']     // 通过require的时候可以省略这些扩展名
        , alias: {                                      // 别名require('resetCss')代表require(process.cwd+'src/css/reset.scss');
            resetCss: 'src/css/reset.scss',
            allComponentCss: 'src/css/allComponent.scss'
        }
    }
}

五、webpack的loader

在webpack.config.js的module.loaders里,我们配置了对应文件的loader模块,这些模块我们也需要自己安装的,webpack只是调用,不会自己安装的,跟安装webpack没啥区别,通过npm install

$ npm install style-loader --save-dev
$ npm install css-loader --save-dev
$ npm install jsx-loader --save-dev
$ npm install sass-loader --save-dev
$ npm install url-loader --save-dev

这只是常用的,url-loader会把8192b字节以下的图片转换为base64方式。具体loader的列表看这里。

六、第一个webpack简单工程

我们根据webpack.config.js构建了以下目录结构,当时实际应该是webpack.config.js根据你的目录构建,总之目录结构和js配置对应上:


  1. 根目录下有npm的package.json文件,webpack的webpack.config.js文件,还有我们的index.html文件。
  2. src目录下有分别的sass,js,images目录和文件
  3. dist是我们准备输出的文件
  4. node_modules是npm install之后保存模块的文件。

index.html文件内容:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
  <script src="dist/js/page/index.js"></script>
  <div>ok</div>
</body>
</html>

src/js/page.index.js内容:

require('resetCss'); //加载初始化样式,这里直接可以加载是因为我们在配置文件里配置了别名
require('allComponentCss'); //加载组件样式
console.log('ok');

src/css/reset.scss内容:

body{
    height:100%;
    width:100%;
    border:1px solid red;
}

src/css/allComponent.scss内容:

div{
    border:1px solid blue;
    width:100%;
    height:80%;
    margin:0 auto;
    text-align:center;
    background:url('../images/1.png') 0 0 no-repeat;
    opacity: 0.9;
    transform: rotate(45deg);
    border-radius: 4px;
}

src/images里有一个小图片,很小,就这样!

然后我们执行:

$ webpack

然后就是。。。。


为什么我抓的图这么大?因为我是27寸5k屏的,4核4Gi7+32G内存+4G显存的Radeon R9 M395X+1TSSD硬盘的大MAC。

继续。。然后我们的dist/js/page/里就有一个index.js了,我们根目录的html引用它,用浏览器打开看一下吧。。你看,我们的图片已经是base64了,css打到head里了。

当然这些都是初步应用,我们不可能每个工程都这样构建一套,还需要继续深入挖掘,但是我们已经基本会用了,碰到问题查看文档和谷歌就能解决了,就先记录到这里吧。

webpack如何编译ES6打包

随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢?在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名)

webpack output

output输出口必须是个对象,因为它必须有两个属性:filename输出出去的文件的名字,一般都是bundle.js,path文件要输出出去到哪里,一般都是dist文件,那如果我们是多页面引用,那上面这个输出就不行了

Webpack 是怎样运行的?

在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具。它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率。主要包含入口(entry)、输出文件(output)、模式、加载器(Loader)、插件(Plugin)等几个部分

webpack Code Splitting浅析

Code Splitting是webpack的一个重要特性,他允许你将代码打包生成多个bundle。对多页应用来说,它是必须的,因为必须要配置多个入口生成多个bundle;对于单页应用来说,如果只打包成一个bundle可能体积很大,导致无法利用浏览器并行下载的能力

手把手教你写一个 Webpack Loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。

Webpack有哪些常见的Plugin?他们是解决什么问题的

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问

vue+webpack4多页面打包配置

多页面配置通常有两种形式,一种是多页面多配置,一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组,所以可以为每个页面单独写一份配置。

Webpack如何实现一个Loader?

loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或\\\"加载\\\"模块时预处理文件,loader是一个node模块,编写loader时要遵循单一原则,每个loader只做一种\\\"转义\\\"工作

用不同语言语法编写webpack配置文件

webpack配置文件默认情况下为webpack.config.js,即用原生js语法书写的配置文件。然而,在我们的项目中,有时候是使用的是其他语言语法进行编程,例如:es6、coffeeScript、typeScript等语言语法。

Webpack 打包含动态加载的类库

在编写库的时候,我们有时候会希望按需加载某些依赖,例如如果代码的运行环境不支持某些功能的话,就加载相关的Polyfill。webpack作为当前最流行的打包工具,早已支持动态加载的功能了。本文将讨论一种用webpack打包含动态加载的类库的方法。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全