一、认识webpack

webpack是一款模块打包加载工具。它能够将各种资源、JS、CSS、图片等作为模块打包加载。本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指出,本人也会积极改正。

二、安装webpack

这里安装webpack的前提是已经安装的node.js和npm。下面进行webpack的全局安装:

$ npm webpack install -g

三、相关配置

每个使用webpack的项目必须有一个webpack.config.js文件。先上代码。下面是我在本次项目中编写的webpack.config.js文件:

 var path = require('path')
var webpack = require('webpack')
var fs = require('fs');
var dir = './client/develop/view';
var readDir = fs.readdirSync(dir);
var entry = {
vendor: ['babel-polyfill','react','redux']
};
readDir.forEach(v => {
v = v.replace(/\.js$/, '');
entry[v] = dir + '/' + v;
}); module.exports = {
entry: entry,
output: {
path: path.join(__dirname, 'client', 'dist', 'js'),
filename: '[name].bundle.js',
publicPath: '/js/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
],
module: {
loaders: [
{
test: /\.js$/,
// loaders: ['babel?optional=runtime'],
loaders: ['babel?presets[]=es2015&presets[]=react'],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test:/\.json$/,
loader:'json'
},
// Optionally extract less files
// or any other compile-to-css language
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
}
}

由上面代码能够看出,webpack.config.js是有固定结构的,该结构主要体现在module.exports对象中:

1.输入接口

entry是页面入口文件配置,可以是字符串、对象、数组格式。下面分别对三种格式进行说明:

(1)字符串格式:当entry是字符串时,该字符串对应的模块会在webpack启动时加载。

(2)数组格式:该数组内所有模块都会在webpack启动时加载,数组的最后一个元素会作为输出。

(3)对象格式:此时会构建一个或多个bundle输出。在上面代码中entry是一个对象,启动webpack后,会在'__dirname/client/dist/js'路径下生成文件名为vendor和'

./client/develop/view'目录下所有文件的名称的bundle文件(太绕口了,原谅我高考语文差点不及格)。

2.输出接口

export是对应的输出配置。该对象有下面三个属性:

(1)path:文件输出路径。说明了文件输出的位置。上面代码中文件输出路径为'__dirname/client/dist/js'。

(2)filename:文件输出名称。代码中文件输出名称为'[name].bundle.js','.bundle.js'为文件名后缀,'[name]'为entry对象中读取的文件名。

(3)publicPath:表示资源发布后的前缀地址。

3.插件引入

在本项目中使用两个插件

(1)CommonsChunkPlugin插件:它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。

(2)DefinePlugin插件:用于接收字符串插入到代码当中。

4.加载器配置

加载器配置是最为关键的一块。该部分针对不同的文件类型分别调用不同的加载器来加载文件。

(1)JS文件加载

 {
test: /\.js$/,
loaders: ['babel?presets[]=es2015&presets[]=react&presets[]=react-hmre&presets[]=stage-2'],
exclude: /node_modules/,
include: __dirname
}

代码中test为正则表达式,表示后缀为.js的文件使用loaders后面的加载器进行加载。

(2)CSS文件加载

{
test: /\.css$/,
loader: "style-loader!css-loader"
}

该部分表示加载后缀为.css的文件使用loader后面的加载器进行加载。

(3)json文件加载器

{
test: /\.json$/,
loader: 'json'
}

该部分表示json文件使用loader后面的加载器进行加载

(4)less文件加载器

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}

该部分表示后缀为.less的文件使用loader后面的加载器进行加载

上面一共列举了四类文件加载。在webpack中还有很多文件加载器,在其他项目中如果需要加载其他类型文件,只需调用该类型文件加载器即可。

四、运行webpack

webpack.config.js编写完毕后,可以运行webpack来查看效果。运行步骤为:在webpack.config.js文件所在目录的DOS命令行直接输入webpack。下图是我运行该项目webpack后的效果图:

五、总结

从上面可以看到,webpack的配置文件可以按照上面的结构进行编写。然后根据项目需要,分别对输入接口、输出接口、插件引入、加载器配置这几个部分进行相应修改。其实,在项目中更多的是使用webpack+gulp的方式进行文件打包管理,现在本人也正在学习gulp,后续也会写一些gulp方面的东西。

说明一下,本人也是接触webpack没多久,还有很多地方没有学习到,也希望大神们多多赐教。

webpack入门学习的更多相关文章

  1. Webpack 入门学习

    1.什么是Webpack? Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...

  2. webpack入门学习手记(一)

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  3. webpack入门学习总结

    <h5概述</h5> webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分 ...

  4. webpack入门-个人学习资源收集

    本来是想自己写哈个人学习webpack心德的,不过网上现在已经有各种比较好的,详细的入门或者深入资源了. 所以我就简单总结了一下,我在入门webpack时看的一些博客和文档,以及顺道看到的一些觉得也应 ...

  5. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  6. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  7. webpack初步学习

    https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.

  8. webpack—入门

    点击进入webpack官网.,开始教程时,建议先学习ES6语法,也请先观看本篇Windows符号介绍文章,当所有webpack内容学习完后,会有一个专门的介绍 webpack四个核心概念(从官网入门— ...

  9. scss入门学习(一)

    sass的文件后缀名 sass是目前流行的css预处理语言.sass有两种后缀文件,一种是.sass,不允许使用大括号和分号:另一种是.SCSS,允许使用大括号和分号,类似于我们平时写css的语法习惯 ...

随机推荐

  1. rel=nofollow 是什么意思

    nofollow是什么意思? nofollow是html标签的一个属性值,Google推荐使用nofollow,告诉机器(爬虫)无需追踪目标页,是指禁止蜘蛛爬行和传递权重,但是如果你是通过sitema ...

  2. 讯飞语音SDK Android平台使用

    1. 支持功能介绍: 2. Android API主要业务接口和流程介绍 -------------------------------------------------------- 工程代码: ...

  3. TatukGIS-TGIS_Editor.CreateShape

    procedure CreateShape(const _layer: TObject; const _ptg: TGIS_Point3D; const _type: TGIS_ShapeType; ...

  4. vim操作命令-笔记

    显示行号:在vim命令行模式下输入 :set nu 或 :set number 取消显示行号:在vim命令行模式下输入 :set nonu 或 :set nonumber 查看文件编码格式: :set ...

  5. kafka笔记-Kafka在zookeeper中的存储结构【转】

    参考链接:apache kafka系列之在zookeeper中存储结构  http://blog.csdn.net/lizhitao/article/details/23744675 1.topic注 ...

  6. 转:PHP如何阻止用户上传成人照片或者裸照

    原文来自于:http://www.hackbase.com/tech/2014-10-12/69367.html 当前,网络淫秽色情信息屡禁不止.屡打不绝,严重危害未成年人身心健康,严重败坏社会风气, ...

  7. Tunnel Warfare

    hdu1540:http://acm.hdu.edu.cn/showproblem.php?pid=1540 题意:给你一列村庄,每个村庄给一个标号,1--n,然后毁掉一些村庄,或者重建几个村庄,重建 ...

  8. LA 3521 Joseph's Problem

    题意:给你正整数n和k,然后计算从i到n k%i的和: 思路:如果n小于1000000,直接暴力计算,然后大于1000000的情况,然后在讨论n和k的大小,根据k%i的情况,你会发现规律,是多个等差数 ...

  9. (转载)MySQL中执行sql语句反斜杠需要进行转义否则会被吃掉

    (转载)http://www.phpcode8.com/lamp/mysql-lamp/mysql-escape-slash.html 最近在执行一个sql备份的还原后,发现系统的部分路径找不到,于是 ...

  10. 【图论】【宽搜】【染色】NCPC 2014 A Ades

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1787 题目大意: N个点M条无向边(N,M<=200000),一个节点只能有一个 ...