webpack简单笔记
本文简单记录学习webpack3.0的笔记,已备日后查阅。节省查阅文档时间
安装
可以使用npm安装
//全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack
npm init会创建package.json文件。配置该文件可以简化我们之后的一些操作,比如我们对其中的“script”添加start命令,可以用“npm start”替代webpack命令
{name: "webpack-example",..."scripts": {"start": "webpack"},...
}
几个概念
webpack是一个现代javascript应用程序的静态模块打包器。它构建一个依赖关系图,包含所有模块,打包成一个或多个bundle。
四个核心概念
- entry :指示webpack应该从哪个模块开始,构建依赖图。默认值./src
- output:指示在哪里输出创建的bundles,默认值./dist
- loader:让 webpack 能够去处理那些非 JavaScript 文件。loader 能够 import 导入任何类型的模块
- plugin:插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量
entry 文件的指定
单一entry文件
mkdir entrydemo
cd entrydemo
npm init
npm init会让你输入一些信息配置package.json。如下
{"name": "entrydemo","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "MIT"
}
接下来我们要创建index.html和main.js文件。main.js文件操作index.html的p标签内容
index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"></head><body><p id="title"></p><script type="text/javascript" src="main.js"></script></body>
</html>
main.js
document.getElementById("title").innerHTML="HELLO webpack";
下面我们要用webpack将main.js打包成bundle.js文件
如果你的webpack是全局安装,那么
webpack main.js bundle.js
如果是安装在项目根目录
node_modules/.bin/webpack main.js bundle.js
注意,在webpack3中,webpack-cli是集成的,到了4里面分开来了。第一次webpack时候可能会提示你安装webpack-cli,安装即可。上面的命令也有所改变,关于webpack4,本文不赘述
然后将index.html的javascript路径改为bundle.js
<script type="text/javascript" src="bundle.js"></script>
然后打开index.html,可以看到页面和上面是一样的
以上是用命令行指定entry file,下面我们写配置文件webpack.config.js去构建bundle.js
module.exports = {entry: './main.js',output: {filename: 'bundle.js'}
}
写好配置文件后,运行webpack命令就构建好bundle.js了。(非全局安装是node_modules/.bin/webpack
)
多个entry file
假设我们的入口文件是main1.js和 main2.js,对应输出是bundle1.js和bundle2.js
webpack.config.js这么写
module.exports = {entry: {bundle1: 'main1.js',bundle2: 'main2.js'}output: {filename: '[name].js'}
}
loader
Babel-loader
Babel-loader用来将JSX/ES6文件转换成普通JS文件
module.exports = {entry: './main.jsx',output: {filename: 'bundle.js'},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['es2015', 'react']}}}]}
};
CSS-loader
webpack.config.js
module.exports = {entry: './main.js',output: {filename: 'bundle.js'},module: {rules:[{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]},]}
};
转载于:https://www.cnblogs.com/pusidun/p/9087057.html
webpack简单笔记相关推荐
- webpack 实践笔记(一)--- 入门
webpack 实践笔记入门(一) [webpack官网文档地址]:(http://webpack.github.io/docs...) [实践工程地址]: (https://github.com/s ...
- webpack学习笔记1
webpack学习笔记1:基本概念 前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
- ES6 -- 简单笔记总结
文章目录 ES6 - 简单笔记总结 JSON 严格模式 箭头函数编写简洁的匿名函数 高阶箭头函数 设置函数的默认参数 rest 操作符 与 函数参数一起使用 spread 运算符展开数组项 使用解构赋 ...
- True FFS内核编程(简单笔记)
True FFS内核编程(简单笔记) 2006-08-22 19:22 True FFS内核编程 1 格式化FLASH 即使FLASH没有和块设备驱动绑定,也可对其进行格式化. tffsDevForm ...
- jToken与JArray简单笔记
jToken与JArray简单笔记 //=============string outhtml = string.Empty;int error = HttpWebHelp.HttpHelp(&quo ...
- bigpipe php,php 使用 bigpipe技术 简单笔记
php 使用 bigpipe技术 简单笔记 php 使用 bigpipe技术 简单笔记 1.配置nginx 关闭proxy_buffering 为 off ,关闭 gzip压缩, 设置 fastcg ...
- webpack学习笔记(三):监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
- webpack学习笔记(二):认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
- 建立项目的webpack简单配置
实战项目中的 Webpack 配置: 说明:以下命令通过 Git Bash 执行 1.建立webpack-demo文件夹及npm初始化 Administrator@PC-20170414ZFJO MI ...
最新文章
- [Go]在vscode中添加对模板文件tmpl的html语法自动补全的支持
- 谷歌搜索喜迎20年,为手机主页添加信息流!
- 为什么有的机器学习应用公司必将失败?
- 零基础该如何系统地自学Python编程?五个阶段带你从小白到大佬
- cacti关于MYSQL的监控
- Nginx的平滑重启和升级
- 中国担保市场竞争战略规划与运营效益分析报告2022-2027年版
- 【MM】 基于收货的发票校验
- MySql联合查询Union
- db2存储过程调用java_db2使用Java存储过程实现MD5函数
- vue 项目常见功能(搜索 时间戳转换 过滤器)
- SQL Server 使用Detach和Attach 方式 移动数据库位置
- auto_ptr scoped_ptr shared_ptr weak_ptr unique_ptr
- custompage.width 不能小数吗_为什么有军人戴眼镜?他们的裸眼视力合格吗?
- 衍射受限透镜成像_成像专题 | 基于孔径阵列的数字全息重建 (AIP APL)
- 常见概率模型在市场中的应用
- 天玑720可以升级鸿蒙系统吗,华为高管:来岁年初就能用上鸿蒙体系,55部华为产物可升级鸿蒙...
- 对话清华大学周昊,详解IJCAI杰出论文及其背后的故事
- 大一下数据结构编程实验——线性结构及其应用
- 异常报错原因及解决方案