文档章节

webpack初见

pin621
 pin621
发布于 2016/11/18 15:23
字数 970
阅读 26
收藏 0

一、什么是webpack? 他有什么优点?

    首先对于很多刚接触webpack人来说,肯定会问webpack是什么?它有什么优点?我们为什么要使用它?带着这些问题,我们来总结下如下:

    Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包,它能有Grunt或Gulp所有基本功能。优点如下:

  1. 支持commonJS和AMD模块。
  2. 支持很多模块加载器的调用,可以使模块加载器灵活定制,比如babel-loader加载器,该加载器能使我们使用ES6的语法来编写代码。
  3. 可以通过配置打包成多个文件,有效的利用浏览器的缓存功能提升性能。
  4. 使用模块加载器,可以支持sass,less等处理器进行打包且支持静态资源样式及图片进行打包。
  5. 更多等等。。。带着这些问题我们慢慢来学习webpack。二:如何安装和配置

二:如何安装和配置

1.我们常规直接使用 npm 的形式来安装:

$ npm install webpack -g

当然如果常规项目还是把依赖写入 package.json 包去更人性化:

$ npm init
$ npm install webpack --save-dev

2.配置webpack

每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,就是一个配置项,告诉 webpack 它需要做什么。

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
 
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        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: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

配置说明:

1).entry

可以是个字符串或数组或者是对象。

当entry是个字符串的时候,用来定义入口文件:

entry: './js/main.js'

当entry是个数组的时候,里面同样包含入口js文件,另外一个参数可以是用来配置webpack提供的一个静态资源服务器,webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化,实时的进行构建,并且自动刷新页面:

entry: [
     'webpack/hot/only-dev-server',
     './js/app.js'
 ]

2).output

参数是个对象,用于定义构建后的文件的输出。其中包含path和filename:

output: {
        path: 'dist/js/page',
        filename: '[name].js'
},

3).module

关于模块的加载相关,我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名,然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器(!用来定义级联关系):

module: {
        //加载器配置
        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'}
        ]
},

4).resolve

webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:

 resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
}

三、运行 webpack

ebpack 的执行也很简单,直接执行

$ webpack --display-error-details

即可,后面的参数“--display-error-details”是推荐加上的,方便出错时能查阅更详尽的信息(比如 webpack 寻找模块的过程),从而更好定位到问题。

其他主要的参数有:

$ webpack --config XXX.js   //使用另一份配置文件(比如webpack.config2.js)来打包
 
$ webpack --watch   //监听变动并自动打包
 
$ webpack -p    //压缩混淆脚本,这个非常非常重要!
 
$ webpack -d    //生成map映射文件,告知哪些模块被最终打包到哪里了

 

参考网址:http://www.cnblogs.com/Leo_wl/p/4862714.html

                 http://www.w2bc.com/Article/50764

© 著作权归作者所有

pin621
粉丝 0
博文 14
码字总数 37468
作品 0
杭州
高级程序员
私信 提问
node+bower+gulp+webpack初见

node node模块管理是通过NPM(即 Node Package Manage,是 NodeJS 模块管理工具)来处理各模块之间的依赖。NPM按树状结构来管理的,支持某模块的不同版本。 [前提是本机已安装node、git环境]...

ifnotme
2016/08/03
202
0
Webpack SplitChunksPlugin插件研究

SplitChunksPlugin初见 自Webpack4以后,代码拆分的插件由CommonsChunkPlugin变成了SplitChunksPlugin,并且不必单独引用,集成到了Webpack之中,通过配置下的optimization.splitChunks和opt...

猎户座小陈
07/18
0
0
webpack4配置详解之逐行逐句分析

前言(https://blog.csdn.net/weixin_43254766/article/details/83267838)   经常会有群友问起、、、甚至配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少。 ...

苏南-首席填坑官
2018/11/12
230
1
webpack4配置详解之慢嚼细咽

前言   经常会有群友问起、、、甚至配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少。   今天就尝试着一起来聊聊吧,旨在帮大家加深理解、新手更容易上路,...

苏南
2018/11/12
0
0
webpack3新特性简介

升级到webpack3 升级到webpack3,只需要通过npm安装即可:    webpack3几乎与webpack2完美兼容,除了会影响一些插件的使用,官方给出的数据是:98%的用户升级后,没有影响webpack功能的正常...

shptc
2017/06/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部