去年写过一篇webpack协助React js工作的简单例子。但是webpack的功能非常强大,并不是专门服务于React js的。之前对webpack理解很模糊,只能简单使用。最近参考其他一些文档教程,重新学习了解了一下webpack的功效。
Webpack简介
Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的扩展语言(Scss,TypeScript, React js等),并将其打包为合适的格式以供浏览器使用。
在webpack中,一切资源都被看做是模块,如js,css,图片,json等等等等。在webpack项目中,js模块可以引进这些模块来使用。
官方图:
Webpack的使用
1,安装
webpack安装的前提是包含NodeJS环境。下面假设机器上已经安装了node环境。
在任何一个自己喜欢的路径下创建新的空文件夹,作为webpack的练习文件夹,终端进入该文件夹后执行下面命令安装webpack
//全局安装 npm install webpack //安装到项目目录 npm install --save-dev webpack
2,创建目录结构
终端执行下面命令创建package.json文件,里面包含项目依赖的模块,自定义的脚本任务等等。执行命令时将会提示填写一些项目信息,如实填写或者一直回车跳过就可以。
npm init
举一个最简单的webpack打包例子
在该文件夹下直接创建三个文件,分别为main.js,test.js,main.html
其中test.js的代码如下,创建一个div,设置文字为Hello, Webpack,并用module.exports导出。
var test = document.createElement('div'); test.textContent = 'Hello, Webpack'; module.exports = test;
main.js代码如下,将test.js中导出的div导入,然后将它放到id为content的元素中。
var test = require('./test.js'); document.getElementById('content').appendChild(test);
之后在终端执行命令,将main.js作为入口文件,webpack将自动识别main.js所依赖的其他文件。然后再指定一个出口文件bundle.js
webpack main.js bundle.js
命令执行完之后,发现文件目录多出了一个bundle.js,将bundle.js引入main.html中,main.html代码如下,包含一个id为content的div。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"></div> </body> <script src="bundle.js"></script> </html>
打开main.html,将会看到:
这就是webpack使用的一个最最简单的例子。
3,Webpack的配置
每次在终端都要设置出口文件和入口文件非常麻烦。我们可以使用webpack的配置文件来设置打包的出口和入口。因为上面的例子所有文件都在根目录下,太过简单,所以删掉目录下处package.json以外的文件,重新创建一个例子。
创建后的目录如下,app目录下存放入口文件,public目录存放唯一的html文件
之后在目录下创建名为webpack.config.js的文件。webpack.config.js这个文件名是webpack默认的配置文件名,如果不想使用这个文件名,可以在终端执行
webpack -config [name]
打开webpack.config.js文件,填入信息
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } };
entry代表唯一的入口文件,output设置出口文件,path代表出口文件路径,filename代表出口文件名字。
在终端执行命令,相当于之前执行的webpack [入口] [出口],只不过这样更加简单,不易出错。
webpack
终端结果:
4,Loaders
webpack项目中,一切皆模块,而实现这个功能的关键,就是Loaders。
通过不同的Loader,webpack可以通过调用外部的脚本或工具对各种各样格式的文件进行处理。
比如:将json转化为js,将React转化为js。
各种Loader都需要单独安装,并且需要在配置文件中进行配置。
下面是几个Loader实例
1,JSON文件
(1)安装转换json的loader
npm install --save-dev json-loader
(2)配置webpack.config.js
module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" }, module: { loaders:[ { test: /\.json$/, loader: "json" } ] } };
其中loader的几个参数说明:
test:一个匹配loaders所处理的文件的扩展名的正则表达式(必须)
loader:loader的名称(必须)
include/exclude:手动添加必须处理的文件(文件夹) 或 不需要处理的文件(文件夹) (可选)
query:为loaders提供额外的设置选项(可选)
(3)在app目录下创建json_test.js,引入根目录的package.json
var config = require('../package.json'); console.log(config); module.exports = function () { var test = document.createElement('div'); test.textContent = JSON.stringify(config); return test; };
(4)和之前一样,在mian.js中引入引入json_test.js中的函数,并append到id为content的元素中。
(5)编辑index.html,创建id为content的div,在终端执行webpack,生成bundle.js,并引入到index.html中。
(6)打开index.html,结果如下:
2,CSS文件
(1)安装css-loader和style-loader
npm install --save-dev style-loader css-loadercss-loader使你能够使用类似@import和url(...)的方法实现require()的功能,style-loader将所有计算后的样式加入页面中。
相关推荐
webpack配置文件详解
主要介绍了前端路由&webpack基础配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Webpack3.0项目打包视频教程详解各种webpack配置,熟悉webpack配置原理
webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js ...
在 webpack 中是使用 SplitChunksPlugin 来实现的,由于 SplitChunksPlugin 配置参数众多,接下来就来梳理一下这些配置参数。 官网上的默认配置参数如下: module.exports = { //... optimization: { ...
主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面,webpack跨域问题等相关内容
【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】: 所有源码都经过严格测试,...
WebPack安装-使用-Loader-配置-插件-环境-排错详解(上) 博客地址:http://blog.csdn.net/pcaxb/article/details/53390151 下载地址:http://download.csdn.net/detail/pcaxb/9696873 WebPack安装-使用-Loader-配置...
主要介绍了webpack安装配置与常见使用过程,主要结合vue实现,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
首先,要使webpack支持eslint,就要要安装 eslint-loader ,命令如下: npm install --save-dev eslint-loader 在 webpack.config.js 中添加如下代码: { test: /\.js$/, loader: 'eslint-loader', enforce: pre...
当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法。为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4....
主要介绍了浏览器缓存和webpack缓存配置,浏览器缓存分为两种类型,强缓存和协商缓存,具体内容详情大家参考下本
本篇文章主要介绍了详解webpack babel的配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
什么是webpack webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块 webpack支持AMD和...
node.js安装及HbuilderX配置详解 npm安装教程: 官网:https://nodejs.org/en/ webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。 vue-cli:...
webpack安装 webpack学习 webpack基础配置 html插件 样式处理 将ES6,ES7等高级语法转化为浏览器可识别的ES5语法 什么是webpack 本质上,webpack 是一个现代 JavaScript应用程序的静态模块打包器(module bundler)。...
本篇文章主要介绍了webpack配置之后端渲染详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧