wepack配置
一、什么是 webpack？
webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。他的目的就是把有依赖关系的各种文件打包成一系列的静态资源。如下图所示：
二、webpack相关使用
1.使用webpack之前，先下载好node.js，不清楚自己是否下载了的，可以通过命令行工具win+R，输入node -v。
如果出现相关的版本号，则说明已经安装Node.js。
2.安装webpack，通过命令行安装，npm i webpack@3.6.0 -g(全局安装)，版本号可根据所需要下载。
3.新建一个项目webpack，在该项目下，创建dist、src文件夹，如下图：
4.因为webpack是一个基于node的项目。然后首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：npm init -y初始化项目，生成package.json文件。
5.然后在webpack下新建一个webpack.config.js文件，就是一个项目配置，告诉webpack需要做什么。
webpack文件的内容可根据自己要引入的文件的需要配置，下图仅是引入需要的path，js路径和css：
webpack.config.js的写法和在Node里的写法相同，我们主要看的就是文件中的module.exports里面的内容
- entry 是指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。
- output是指输出文件的配置项
- path － 表示输出文件的路径
- filename - 表示输出文件的文件名
6.记得在相关的HTML页面引入bunble.js文件
7.在package.json文件中配置build，name与你的项目名一致，build与下图一致。如下图：
8.要引入css,还要下载相关的loader，
- module 配置处理文件的选项
- loaders 一个含有wepback中能处理不同文件的加载器的数组
- test 用来匹配相对应文件的正则表达式
- loaders 告诉webpack要利用哪种加载器来处理test所匹配的文件
- loaders 的安装方法
$ npm install xxx-loader --save-dev
9.所有的都下载完成后，在package.json文件中可以看到相关的依赖。
10.此时就可以直接在Terminal，输入npm run build 回车键、运行项目。
这个小案例，实现的css样式主要是修改body的背景。其他的就是分享实现如何安装和配置webpack的问题。
其实写得有点乱（~_~），希望还是对大家有所帮助吧......
下面是全部代码：
首先是文件结构：
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
webpack是一个现代的JavaScript的静态模块打包工具，基于node
</body>
<script src="dist/bunble.js"></script>
</html>
2.webpack.config.js
const path=require('path')
module.exports={
entry:'./src/index.js',//入口
output:{
path:path.resolve(__dirname,'dist'),
filename:'bunble.js'
},
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'],
}
]
}
}
3.index.js
const {add}=require('./js/b')
console.log(add(4,2))
require('./css/test.css')
4.test.css
body{
background: aquamarine;
}
5.b.js
function add(x,y) {
return x+y
}
module.exports={
// add:add
add
}
结果：
wepack配置的更多相关文章
- 前端工程师：电信专业转前端是如何拿到阿里、腾讯offer的？
1.个人情况 ● 211本科 985硕士 电信专业 女生 ● 16年3月开始学习前端 ● 16年7月开始实习,共五家实习经历(不是特别厉害的厂) ● 秋招拿到两个offer(阿里.腾讯).没错只有这两 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- 前端内网穿透，localtunnel你值得拥有！
一个前端在调试本地页面时,总会有些稀奇古怪的需求,比如产品立刻要看你的页面效果,而此时有没有上线环境折腾给他看,那此时通过内网穿透的方式,实时把你的项目生成一个在线链接丢给他,让他去找那一像素的bug ...
- wepack环境配置1之node的安装
.向往已久的webpack终于配好了.. 1.要安装webpack,首先需要安装nodejs nodejs下载地址:https://nodejs.org/en/ 下载完成后,一步步安装即可,我是安装到 ...
- vue-cli#2.0 webpack 配置分析
目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-s ...
- webpack学习笔记—webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...
- webpack配置React开发环境(上)
Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- webpack安装、基本配置
文章结构: 什么是webpack? 安装webpack webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学react ...
随机推荐
- Spring学习（三）--Spring的IOC
1.BeanFactory和FactoryBean BeanFactory是一个接口类,定义了IOC容器最基本的形式,提供了IOC容器所应该遵守的基本服务契约. FactoryBean是一个能产生或者 ...
- Centos-强制将内存中数据写入磁盘-sync
sync 强制将内存中数据写入磁盘,以免数据丢失.在linux系统中,修改过的操作并不会立即写入磁盘,而是先写到内存中,通过buffer队列当达到指定时间或者指定大小再一次性写入磁盘,提高IO效率,正 ...
- mysql-3-orderby
#进阶3:排序查询 /* 语法: SELECT FROM WHERE ORDER BY ASC|DESC */ USE myemployees; #案例1:查询员工信息,按工资从高到低排 SELECT ...
- 题解 SP1026 【FAVDICE - Favorite Dice】
首先,这是一道经典的期望dp题 因为最终状态 $ (所有面都被筛到过) $ 是确定的,所以才用 逆推 ,设状态 $ f[i] $ 表示已经筛到了 $ i $ 个不同的面,有 $ i\over n $ ...
- 二进制K8S集群使用Bootstrap Token 方式增加Node
TLS Bootstraping:在kubernetes集群中,Node上组件kebelet和kube-proxy都需要与kube-apiserver进行通信,为了增加传输安全性,采用https方式, ...
- 踩坑系列：MySql only_full_group_by配置，竟导致所有应用报错？
1. 踩坑经历 一个很平常的下午,大家都在埋头认真写bug呢,突然企业微信群里炸锅了,好多应用都出现大量的Error日志,而且都报同一个错误,就是下面这个: Caused by: com.mysql. ...
- 多路复用select和epoll的区别（转）
先说下本文框架,先是问题引出,然后概括两个机制的区别和联系,最后介绍每个接口的用法 一.问题引出 联系区别 问题的引出,当需要读两个以上的I/O的时候,如果使用阻塞式的I/O,那么可能长时间的阻塞在一 ...
- [Docker]linux异常关机，docker镜像丢失
在运行中的docker容器遇到意外情况,可能会自动终止运行,例如磁盘空间不足. 解决办法: 找到/var/lib/docker/containers文件夹下的所有容器ID 执行命令,查看容器信息 ,找 ...
- 多测师讲解jmeter _基本介绍_（001）高级讲师肖sir
jmeter讲课课程 一.Jmeter简介 Jmeter是由Apache公司开发的一个纯Java的开源项目,即可以用于做接口测试也可以用于做性能测试. Jmeter具备高移植性,可以实现跨平台运行. ...
- Windows下CertUtil校验和编码文件
目录 前言 CertUtil计算文件hash 计算MD2 计算MD4 计算MD5 计算SHA1 计算SHA256 计算SHA384 计算SHA512 文件base64编码 文件base64解码 文件h ...