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

时间: 2017-11-22阅读: 1580标签: 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里了。

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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/152

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

webpack是什么?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

18个webpack插件总有一款适合你的

何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程

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

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

webpack3 升级 webpack4踩坑记录

安装webpack4最新版本;这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

webpack 前后端分离开发接口调试解决方案,proxyTable解决方案

如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法,请查阅其文档。在 localhost:3000 上有后端服务的话,你可以这样启用代理

浅谈webpack优化

由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相关的优化知之甚少

webpack的optimization.namedModules

optimization.namedModules 这个配置对于调试起来很方便,比如原本生产的一段代码是长这样的:很多奇怪的数字,比如最后几行的 [0,0] 是表示了什么意思?如果配置上namedModules 为true呢

Webpack知识点

Webpack从基础概念到项目配置,涉及知识点较多,现将学习使用过程中遇到内容记录下来,方便以后速查。Webpack是一个模块打包工具,在Webpack里一切文件皆模块。通过loader转换文件,通过plugin注入钩子

通用、封装、简化 webpack 配置

现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候,总是免不了要配置 webpack,很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库,比如 roadhog。

点击更多...

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