前言

这几天在准备一个单页面应用, 准备试试webpack神器,在准备webpack下的知识点,顺便记录下一些使用的心得。

webpack 的配置说明

在近来的前端开发中,业务逻辑复杂化,层次多样化,各种库和各种的包百花争鸣,而在模块的加载又没有一统天下的情况下,资源的管理和,静态资源的打包催生了现在很火的webpack,使其在webapp的应用中为前端人员所青睐。以下是webpack一些基础的说明和基础的小demo。

loader 和module plugin 的使用

loader 是为了让原本只能加载js的webpack能够支持CoffeeScript、 JSX、 LESS 或图片等作为依赖来一起打包编译的一个插件,这里的工作是解析,递归语法树,所以编译这部分的工作会导致cpu和内存飙升,而module 插件部分则是建立在在初始的loader之后。

//webpack的配置说明
var webpack = require('webpack'); module.exports = {
entry:['./entry.js'], //入口文件,可以多个文件, ['./entry01.js','./entry02.js']
output: { // 输出文件
path: __dirname, // 路径
filename: 'bundle.js' //具体的文件文件名
},
module: { // 对模块的处理逻辑
loaders: [
// 匹配js|jsx 后缀的文件,node_modules里面的模块除外,babel转码,当然也可以这么写
// loader:"babel-loader",
// query: {
// presets: ['es2015', 'react']
// }
//
{ test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, // 匹配css, 先用css-loader加载,'?' 后为具体的传参数,这里传参到css-loader 解析用css Module写的css文件,解析后再传给style-loader将内容解析到html里面
{ test: /\.css$/, loader: 'style-loader!css-loader?modules' }, // 匹配png,jpg ,'?limit' 表示为文件小于8192byte 的文件,转为 Data URl,其他的则为路径
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
plugins: [
// 定义插件配置,可以是第三方配置,BannerPlugin 用来定义输出文件bandle.js的首部信息(注释)
new webpack.BannerPlugin('This file is created at '+ new Date()), // js 文件压缩
new uglifyJsPlugin({compress: { warnings: false }})
]
}
加载模块的配置的写法:

除了在webpack.config.js 里面的写法外,还可以在命令行, requrie 模块加载处写,比如

webpack entry.js bundle.js --module-bind 'css=style!css'
require("!style!css!./style.css") // 载入 style.css

---- To be continued!

备注

webpack官方说明: http://webpack.github.io/docs/
中文简介: http://webpackdoc.com/loader.html
阮老师的demo:https://github.com/ruanyf/webpack-demos

webpack 配置简单说几句 ?的更多相关文章

  1. vue-cli webpack配置 简单分析

    vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...

  2. 超简单,webpack配置

    有看过我的博客的童鞋可能有看到我最近有在利用闲暇时间做一个前后台均涵盖的音乐播放器项目,但是呢,我是一个小小的前端,对后台的了解可以说只停留在很初级的阶段,当然了音乐播放器的音乐列表是后台轮循出来的, ...

  3. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

  4. webpack前端简单配置

    每次用webpack创建项目时,总是要安装一堆包,还要配置一系列文件解析规则,webpack打包规则等,烦不胜烦.网上找的很多webpack配置里面很多里面的配置或者引入包都是被弃用的,因此自己总结了 ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  7. Webpack配置示例和详细说明

    /* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...

  8. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  9. webpack 4 简单介绍

    webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是 ...

随机推荐

  1. 灰色3D按钮组合

    在线演示 本地下载

  2. JMeter学习(八)JDBC测试计划-连接Oracle

    一.测试环境准备   Oracle:10g  JDBC驱动:classes12.jar oracle安装目录下(oracle\product\10.2.0\db_1\jdbc\lib\classes1 ...

  3. linux下常用FTP命令 1. 连接ftp服务器[转]

    1. 连接ftp服务器 格式:ftp [hostname| ip-address]a)在linux命令行下输入: ftp 192.168.1.1 b)服务器询问你用户名和密码,分别输入用户名和相应密码 ...

  4. 【bzoj3240 && 洛谷P1397】矩阵游戏[NOI2013](矩阵乘法+卡常)

    题目传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3240 这道题其实有普通快速幂+费马小定理的解法……然而我太弱了,一开始只想到了矩阵乘法的 ...

  5. IOS 发布被拒 PLA 1.2问题 整个过程介绍 01

    公司前端时间发布IOS APP ,但是遇到一些很麻烦的问题,就是一个让人摸不着头脑的问题. 问题: The Seller and Artist names associated with your a ...

  6. 利用PushbackReader读取文件中某个字符串之前的内容

    package File; import java.io.FileReader; import java.io.IOException; import java.io.PushbackReader; ...

  7. hdoj1003--Max Sum

    Problem Description Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the max sum ...

  8. 语音03_TTS_C#示例代码

    参考网址: (1)TTS-零基础入门-10分钟教你做一个语音功能 http://blog.csdn.net/u010176014/article/details/47326413 (2).TTS-零基 ...

  9. svg_path

    1. path 的 d属性中,M的大/小写貌似不影响图形显示效果(至少现在[20160108]我测试下来是这样[chrome 版本 47.0.2526.80 m]):L/H/V 的大小写 是影响图形显 ...

  10. js装饰者模式

    装饰者模式是为已有的功能动态地添加更多功能的一种方式.当系统需要新功能的时候,是向旧的类中添加新的代码.这些新加的代码通常装饰了原有类的核心职责或主要行为,在主类中加入了新的字段,新的方法和新的逻辑, ...