webpack 配置文件相关解说

博客地址:https://ainyi.com/10

webpack

- 什么是webpack:

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

- webpack工作方式:

把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

- 安装webpack

1 //全局安装
2 npm install -g webpack
3 //安装到项目目录
4 npm install webpack --save-dev

- 常见的webpack配置文件

 1 const webpack = require('webpack');
 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); //html解析导入
 3 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 
 5 // __dirname 是 node.js 中的一个全局变量,它指向当前执行脚本所在的目录
 6 module.exports = {
 7         entry: __dirname + "/app/main.js", //唯一入口文件
 8         output: {
 9             path: __dirname + "/build", //打包后输出的文件路径
10             filename: "bundle-[hash].js" //打包后输出的文件名
11         },
12         devtool: 'none',
13         //在package.json中的scripts对象中添加webpack-dev-server命令可开启本地服务器
14         devServer: {
15             contentBase: "./public", //本地服务器所加载的页面所在的目录
16             //在开发单页应用时,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html,也就是不跳转
17             historyApiFallback: true,
18             inline: true, //当源文件改变时会自动刷新页面
19             hot: true //热加载
20         },
21         //配置loader
22         //模块的解析规则
23         module: {
24             rules: [
25               //js 匹配所有的js,用babel-loader转译  排除掉node_modules
26               {
27                 test: /(\.jsx|\.js)$/,
28                 use: {
29                     loader: "babel-loader"
30                 },
31                 exclude: /node_modules/
32               },
33               //css  use时如果多个loader,要从右往左写
34               {
35                 test:/\.css$/,
36                 use:[
37                   {
38                       loader: "style-loader"
39                   },{
40                       loader: "css-loader"
41                   }
42                 ]
43               },
44               //less
45               {
46                 test:/\.less$/,
47                 use:[
48                   {
49                       loader: "style-loader"
50                   },{
51                       loader: "css-loader"
52                   },{
53                       loader: "less-loader"
54                   }
55                 ]
56               },
57                //配置图片  只在10000字节以下转化base64,其他情况下输出原图片
58               {
59                 test: /\.(png|jpe?g|gif|svg|cur)(\?.*)?$/,
60                 loader: 'url-loader',
61                 options: {
62                   limit: 10000,
63                   name: utils.assetsPath('img/[name].[hash:7].[ext]')
64                 }
65               }
66             ]
67         }
68     },
69     plugins: [
70         //通过这个插件打包后会在js文件中增加一段注释:/*! 版权所有,翻版必究 */
71         new webpack.BannerPlugin('版权所有,翻版必究'),
72         //HtmlWebpackPlugin:依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html
73         //new 一个这个插件的实例,并传入相关的参数,自动插入到dist目录中
74         new HtmlWebpackPlugin({
75             //使用的模板
76             template: __dirname + "/app/index.tmpl.html" 
77         }),
78         //Hot Module Replacement(HMR)热加载插件:允许你在修改组件代码后,自动刷新实时预览修改后的效果。
79         //在webpack中实现HMR也很简单,只需要做两项配置
80         //在webpack配置文件中添加HMR插件;
81         //在Webpack 的 devServer中添加“hot”参数为true;
82         new webpack.HotModuleReplacementPlugin(),
83         new webpack.optimize.OccurrenceOrderPlugin(),
84         new webpack.optimize.UglifyJsPlugin(),
85         new ExtractTextPlugin("style.css")
86     ]
87 };

Loaders

- 通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理

- 比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

- Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置,Loaders的配置包括以下几方面:

test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)

loader:loader的名称(必须)

include/exclude: 手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);

query:为loaders提供额外的设置选项(可选)

babel

- babel是一种javascript编译器,它能把最新版的javascript编译成当下可以执行的版本,简言之,利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6,甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。

- babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中

plugins

- 插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。

- Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说:

loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个。

插件并不直接操作单个文件,它直接对整个构建过程其作用。

- Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。

- 插件实例在上述代码讲解

博客地址:https://ainyi.com/10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

gulp+webpack工具整合简介

webpack简介 Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 ? webpa...

46050
来自专栏流柯技术学院

CAS客户端服务器端配置步骤

CAS 是 Yale 大学发起的一个开源项目,旨在为 Web 应用系统提供一种可靠的单点登录方法,CAS 在 2004 年 12 月正式成为 JA-SIG 的一...

68320
来自专栏守候书阁

webpack快速构建项目

webpack是什么我在这里就不多说了,实在不知道的可以直接在去搜一下,都一大堆答案。关于用webpack怎么构建项目,方法也是多种多样,五花八门。今天,我就写...

11730
来自专栏重庆的技术分享区

Python安装与Eclipse环境配置(踩坑,看完这篇就够了)

11520
来自专栏木头编程 - moTzxx

Laravel VerifyCsrfToken 报错解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

12320
来自专栏Samego开发资源

Linux搭建FTP服务器

1.3K70
来自专栏点点滴滴

CentOS配置denyhosts配置

10120
来自专栏从零开始学 Web 前端

绑定Github上的个人博客到Godaddy域名

60410
来自专栏python成长之路

学HTTP协议所要知道的基础知识(微总结)

29560
来自专栏性能与架构

nginx实例 - 如何防止大图片占满带宽?

场景 前几天网站出现了访问缓慢的情况,查看系统资源状况后,发现出网带宽一直是占满的状态 查看服务器日志,发现了很多10M左右的超大图片的请求,这些图片占满了...

50860

扫码关注云+社区

领取腾讯云代金券