webpack⼊门和实战（⼆）：全⾯理解和运⽤loader和plugins 您的阅读⽬录：
1.1、什么是loader？
webpack的设计理念，所有资源都是“模块”，webpack内部实现了⼀套资源加载机制。loaders ⽤于转换应⽤程序的资源⽂件，他们是运⾏在nodejs下的函数 使⽤参数来获取⼀个资源的来源并且返回⼀个新的来源(资源的位置)，例如你可以使⽤loader加载器可以快速编译预处理器(less,sass,coffeeScript)。
1.2、使⽤loader
安装loader
$ npm install xxx-loader --save-dev
加载器包括：style-loader、css-loader、less-loader、sass-loader、jsx-loader、url-loader、babel-loader、file-loader等等；各个加载器都有⾃⼰的功能，你可以根据项⽬需要来安装相应的加载器；
配置loader
安装完各个loader后，我们就需要配置⼀下我们的fig.js，载⼊我们的loader。
/
/ fig.js
entry: path.join(__dirname, 'src/entry.js'),
output: {
path: path.join(__dirname, 'out'),
publicPath: "./out/",
filename: 'bundle.js'
},
// 新添加的module属性
module: {
loaders: [
{test: /\.js$/, loader: "babel"},
{test: /\.css$/, loader: "style!css"},
{test: /\.(jpg|png)$/, loader: "url?limit=8192"},
{test: /\.scss$/, loader: "style!css!sass"}
]
}
};
我们主要看看module的loaders。loaders是⼀个数组，⾥⾯的每⼀个对象都⽤正则表达式，对应着⼀种配对⽅案。Webpack提供了⼀套加载器，⽐如css-loader,less-loader,style-loader，url-loader等，⽤于将不同的⽂件加载到js⽂件中，⽐如url-loader⽤于在js中加载png/jpg格式的图⽚⽂件；css/style loader⽤于加载css⽂件；less-loader加载器是将less编译成css⽂件；不同的处理器通过!分隔并串联起来。这⾥的loader是可以省略掉-loader这样的，也就是原本应该写成style-loader!css-
loader!sass-loader.
我们先来理解下less-loader加载器，其他的sass-loader也是⼀个意思，less-loader加载器是把css代码转化到style标签内，动态插⼊到head标签内；
我们先来看看我项⽬的结构如下：
因此你需要根据package.json来初始化本项⽬的依赖模块，执⾏命令：npm install;
其中less/main.less ⽂件如下代码：
@base:red;
body{
margin:10px;
background-color:@base;
}
现在我想通过html-webpack-plugin插件动态⽣成 html页⾯及引⼊index.js 和⽣成 index.js⽂件；
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了⼀些⽂件夹的路径
var ROOT_PATH = solve(__dirname);
var SRC_PATH = solve(ROOT_PATH, 'src');
var BUILD_PATH = solve(ROOT_PATH, 'build');
entry: SRC_PATH + "/js/index.js",
output: {
filename: "build.js",
path: BUILD_PATH
},
module: {
loaders: [
{test: /\.less$/,loader: "style!css!less"}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app',
filename: 'index.html',
inject: true,
hash: true
})
]
};
在项⽬的根⽬录运⾏webpack，即可动态⽣成html⽂件和js⽂件，打开⽣成后的index.html即可看到css⽣效了，且css被动态内链到head标签内了。
上⾯是使⽤webpack打包；现在我们再来看看使⽤第⼆种⽅案来打包~
使⽤gulp来进⾏打包
我们知道使⽤gulp来打包的话，那么我们需要在根⽬录下需要新建 Gulpfile.js；同时需要安装依赖包gulp和gulp-webpack，执⾏命令：npm install gulp gulp-webpack --save-dev
因此我们这边Gulpfile.js的源码如下：
var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./fig.js");
gulp.task('webpack', function () {
var myConfig = ate(webpackConfig);
return gulp
.src('./js/index.js')
.pipe(webpack(myConfig))
.pipe(gulp.dest('./build'));
});
// 注册缺省任务
gulp.task('default', ['webpack']);
然后修改⼀下fig.js代码，只需要将output中push屏蔽掉，如下所⽰：
output: {
filename: "build.js"
// path: BUILD_PATH
},
即可，然后再在命令⾏中输⼊gulp即可⽣成build/build.js和index.html了，如下所⽰：
less-loader项⽬源码地址：
babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使⽤ES6了。
我们先来看看我项⽬的结构如下：
⾸先安abel-loader。执⾏命令：npm install babel-loader –save-dev
当然你也需要根据package.json来初始化本项⽬的其他依赖模块，执⾏命令：npm install；如上安装完后，我们在根⽬录node_modules会⽣成⽂件，如下所⽰：
src/js/a.js，完全是遵照es6的语法，代码如下：
//es6的语法
let LOADER = true;
//ports = LOADER;
class Project {
constructor(name) {
this.name = name;
}
start() {
return"Project " + this.name + " starting";
}
}
var project = new Project("Journal");
let projectName = project.start(); // "Project Journal starting"
src/js/index.js，执⾏⼊⼝,⽤于输出es6代码结果，代码如下：
var aMoudle = require('./a');
console.log(aMoudle);
现在我们可以在fig.js⾥⾯moudle.loaders配置加载器了，代码如下：
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了⼀些⽂件夹的路径
var ROOT_PATH = solve(__dirname);
var SRC_PATH = solve(ROOT_PATH, 'src');
var BUILD_PATH = solve(ROOT_PATH, 'build');
entry: SRC_PATH + "/js/index.js",
output: {
filename: "build.js",
path: BUILD_PATH
},
module: {
loaders: [
{test: /\.js$/, loader: 'babel'}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: [
new HtmlwebpackPlugin({
title: 'Hello babel-loader',
webpack打包流程 面试
filename: 'index.html',
inject: true,
hash: true
})
]
};
最后⽣成的build/index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello babel-loader</title>
</head>
<body>
<script type="text/javascript" src="build.js?906bc2a0e6ca45cdeddd"></script></body>
</html>
index.html在控制台的打印效果为：
说明⽤babel-loader加载器来执⾏es6代码，执⾏成功。
babel-loader项⽬源码地址：
安装 webpack 后，可以使⽤ webpack 这个命令⾏⼯具。主要命令： webpack <entry> <output> 。可以切换到包含fig.js的⽬录运⾏命令：    webpack: 启动 执⾏⼀次开发时的编译
webpack  -w：如果你想当改变⼀个⽂件⽽让webpack实时编译
webpack -p: 执⾏⼀次⽣成环境的编译（压缩）
webpack  -d：对⽂件进⾏解压缩，提供source map，⽅便调式代码⽅便调试⽂件
webpack --config customconfig.js：如果你想把默认的配置⽂件fig.js改成⾃定义⽂件
webpack --watch ：在开发时持续监控增量编译（很快）
webpack --display-error-details 显⽰更多报错信息
webpack --display-chunks 展⽰编译后的分块
webpack --colors 显⽰静态资源的颜⾊
webpack --progress 显⽰编译进度
webpack --display-reasons 显⽰更多引⽤模块原因
webpack --profile 输出性能数据，可以看到每⼀步的耗时
webpack --display-modules 默认情况下node_modules下的模块会被隐藏，加上这个参数可以显⽰这些被隐藏的模块
webpack --sort-chunks-by,--sort-assets-by,--sort-modules-by 将modules/chunks/assets进⾏列表排序
webpack -help，查看webpack帮忙⽂档
现在我们以babel-loader项⽬为例，展⽰webpack常⽤命令⾏的使⽤⽅法;
我们下⾯来了解下 webpack -w，如下所⽰：
⽐如我在js⽂件⾥⾯随便增加⼀点代码后，保存后，再刷新页⾯即可可以看到代码⽣效了，⽆需重新运⾏webpack或者gulp，使⽤webpack -w 可以实时打包。
webpack -p 的含义是对进⾏打包后的⽂件进⾏压缩代码；⽐如我在之前使⽤chrome看打包后的代码如下：
如上可以看到，代码是未压缩的，但是当我在控制台命令⾏中运⾏ webpack -p 命令后，如下所⽰：
我们现在再到控制台上看下代码变成已经压缩后的代码了，如下所⽰：
webpack  -d 是提供未压缩之前的源码 ⽅便代码中的调式；如下所⽰：
当我运⾏如上所⽰后，我们再来看看刚才已经压缩后的代码变成什么样⼦呢？如下所⽰：
如上代码可以看到 我们进⾏压缩后的代码，通过运⾏ webpack -d 命令后，即可还原未压缩的代码，这样的话就可以⽅便我们线上调式代码了。同时⽣成了⼀个map⽂件，bulid.js.map主要是⽅便调试。
webpack --watch ：在开发时持续监控增量编译（很快）与webpack -w效果⼀样。如图为修改了代码之后的表现：
webpack --display-chunks 展⽰编译后的分块
webpack --display-modules 显⽰node_modules下的隐藏模块
webpack -help，查看webpack帮忙⽂档
webpack已经内嵌了uglifyJS来完成对JS与CSS的压缩混淆，⽆需引⽤额外的插件。
压缩代码如下：
new webpack.optimize.UglifyJsPlugin({    //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require']    //排除关键字
})
这⾥需要注意的是压缩的时候需要排除⼀些关键字，不能混淆，⽐如$或者require，如果混淆的话就会影响到代码的正常运⾏。
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require("webpack");
entry: {
'index':'./src/index.js'
},
output: {
path: solve(__dirname, "./build"),
filename: "[name].js"
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'}
]
},
//添加我们的插件会⾃动⽣成⼀个html⽂件
plugins: [
new HtmlwebpackPlugin({
title: 'inner plugin:UglifyJsPlugin',
filename: 'index.html',
inject: true,
hash: true,
minify:{ //压缩HTML⽂件
removeComments:true,    //移除HTML中的注释
collapseWhitespace:true//删除空⽩符与换⾏符
}
}),
new webpack.optimize.UglifyJsPlugin({    //压缩代码
compress: {
warnings: false
},
except: ['$super', '$', 'exports', 'require']    //排除关键字
})
]
}
View Code
继续运⾏下webpack可以看到js已经被压缩了；注意：但是貌似对es6的语法不能压缩~
根据内置组件webpack进⾏代码混淆，主要是针对⽣成后的js代码，如index.js，代码如下:
根据外部组件html-webpack-plugin中minify进⾏代码压缩，主要是针对index.html，⽤于清除⾥⾯的注释、空⽩符与换⾏符等。结果如下：
这个插件⽤来简化创建服务于 webpack bundle 的 HTML ⽂件，尤其是对于在⽂件名中包含了 hash 值，⽽这个值在每次编译的时候都发⽣变化的情况。你既可以让这个插件来帮助你⾃动⽣成 HTML ⽂件，也可以使⽤ lodash 模板加载⽣成的 bundles，或者⾃⼰加载这些 bundles。⾃动⽣成满⾜要求的html⽂件。
使⽤ npm 安装这个插件：npm install html-webpack-plugin --save-dev
⾸先来看看项⽬的⽬录结构如下：
运⾏命令 npm install 把依赖包加载出来；
接着在 fig.js配置如下：
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了⼀些⽂件夹的路径
var ROOT_PATH = solve(__dirname);
var SRC_PATH = solve(ROOT_PATH, 'src');
var BUILD_PATH = solve(ROOT_PATH, 'build');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。