Webpack基础应用篇 - 「8」管理资源

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack基础应用篇 - 「8」管理资源相关的知识,希望对你有一定的参考价值。

参考技术A

在上一章,我们讲解了四种资源模块引入外部资源。除了资源模块,我们还可以通过loader引入其他类型的文件。

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

在 webpack 的配置中, loader 有两个属性:

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性: test 和 use 。这告诉 webpack 编译器(compiler) 如下信息:

为了在 JavaScript 模块中 import 一个 CSS 文件,你需要安装 style-loader 和 css-loader,并在 f="https://webpack.docschina.org/configuration/module">module 配置 中添加这些 loader:

修改配置文件:

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执行。第一个 loader 将其结果(被转换后的资源)传递给下一个 loader,依此类推。最后,webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序: \'style-loader\' 在前,而 \'css-loader\' 在后。如果不遵守此约定,webpack 可能会抛出错误。webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这个示例中,所有以 .css 结尾的文件,都将被提供给 style-loader 和 css-loader 。

这使你可以在依赖于此样式的 js 文件中 import \'./style.css\' 。现在,在此模块执行过程中,含有 CSS 字符串的

《nodejs+gulp+webpack基础实战篇》课程笔记--webpack篇

webpack引入

  前面我们简单学习了gulp,这时一个前端构建框架---webpack产生了(模块打包) 它能帮我们把本来需要在服务端运行的JS代码,通过模块的引用和依赖打包成前端可用的静态文件。(这里有需要了解一下CommonJS规范,具体请自行查看http://commonjs.org)。

  安装webpack:

npm install -g wabpack  //这里我们采用全局安装,保证每个项目中都能使用到

  设置配置文件:

    在项目目录下,新建一个webpack.config.js文件

module.exports=
{
    entry:[                     //entry是入口文件,可以多个,代表要编译哪些JS
        \'./xiaozu.js\'
    ],
    output:{
        path:\'./build/js\',      //输出文件夹
        filename: \'build.js\'    //最终打包生成的文件名
    }

}

  OK ,然后我们就可以运行测试下。这里测试我就省略了。


webpack和gulp"勾结"初步 

npm install gulp-webpack --save-dev
 //这是一个可以无比方便的关联gulp和webpack的插件

  接着,我们来测试下:老规矩,老师设计一个需求,1、首先使用CommonJS规范编写代码 2、利用webpack 编译JS文件。 3、编译好后用gulp压缩。注意:需要一次性完成,而不是敲两次命令 .

  在gulpfile.js中引入

var gulp_webpack = require("gulp-webpack");
//gulpfile.js文件
var gp = require("gulp");
var gulp_concat = require("gulp-concat");
var gulp_uglify = require("gulp-uglify");
var gulp_webpack = require("gulp-webpack");
gp.task("xiaozu",function(){
    gp.src([\'xiaozu.js\'])
        .pipe(gulp_webpack())       //首先编译

        .pipe(gulp_uglify())        //压缩
        .pipe(gp.dest(\'./build/js\'));


    gp.src([\'*.css\']).pipe(gp.dest(\'./build/css\'));
});

  然后我们测试后,发现最终生成的文件名不是可控的。说明1、没有加载配置文件 2、同时并没有调用我们上节课独立安装的webpack(请注意,gulp-webpack插件中有个webpack)。这里们肯定是需要调用我们自己“独立”安装的webpack(版本可控)。

  两种方式:第一种依然只使用gulp-webpack ,但是我们需要传入一个配置文件对象。

var webpack_config=require(“./webpack.config.js”);
//这是webpack本身的配置 gulp-webpack 第一个参数就是给你传配置的。

  其中我们还需要修改一下webpack.config.js

 output:{
        path: __dirname+\'/build/js\',      //输出文件夹
        filename: \'build.js\'    //最终打包生成的文件名
    }

  第二种办法,使用我们独立安装的webpack

//在gulpfile.js文件中引用
 var webpack = require(‘webpack’);   
//第一个参数传入配置文件,第二个参数是独立的webpack
gulp_webpack(gulp_webpack_config,webpack)
//现在gulpfile.js的内容
var gp = require("gulp");
var gulp_concat = require("gulp-concat");
var gulp_uglify = require("gulp-uglify");
var gulp_webpack = require("gulp-webpack");
var webpack = require("webpack");
var webpack_config = require("./webpack.config.js");
gp.task("xiaozu",function(){
    gp.src([\'xiaozu.js\'])
        .pipe(gulp_webpack(webpack_config,webpack))       //传入参数,引入webpack的配置,再编译

        .pipe(gulp_uglify())        //压缩
        .pipe(gp.dest(\'./build/js\'));


    gp.src([\'*.css\']).pipe(gp.dest(\'./build/css\'));
});

  版权声明:笔记整理者亡命小卒热爱自由,崇尚分享。但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的《前端开发速学成财(nodejs+gulp+webpack基础实战篇)。本学习笔记小卒于博客园首发, 如需转载请尊重老师劳动,保留沈逸老师署名以及课程来源地址    

上一课:《nodejs+gulp+webpack基础实战篇》课程笔记(二)--gulp速度上手

下一课:《nodejs+gulp+webpack基础实战篇》课程笔记(四)-- 实战演练

以上是关于Webpack基础应用篇 - 「8」管理资源的主要内容,如果未能解决你的问题,请参考以下文章

网络基础之网络协议篇

基础篇——webpack基础用法(三)

webpack基础

玩转 webpack视频课程学习笔记合集(未完结)

vue技术入门篇

《nodejs+gulp+webpack基础实战篇》课程笔记--附加课