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 ...
随机推荐
- JAVA并发笔记
重入锁的特性, 避免死锁, 如果有锁的话, 不用重新加锁, 直接增加锁的次数.. Synchronize, ReentrantLock都是重入锁. 读写锁, ReentrantReadWriteLoc ...
- django 的跨域配置
1.跨域原理 #1. 首先浏览器安全策略限制js ajax跨域访问服务器 #2. 如果服务器返回的头部信息中有当前域: // 允许 http://localhost:8080 这个网站打开的页面中的j ...
- C++中_T()和L的区别
转载:https://blog.csdn.net/amusi1994/article/details/53898960 前言 本文旨在介绍于VC++常见的两个类型:_T()和L 概念 字符串前面加 ...
- 【题解】[SDOI2017]数字表格
Link #include<bits/stdc++.h> using namespace std; #define int long long const int MAXN=1e6; in ...
- 记录编译JDK11源码时遇到的两个问题
执行make all报错信息: 错误一 /src/hotspot/share/runtime/arguments.cpp:1461:35: error: result of comparison ag ...
- Tomcat 第六篇：类加载机制
1. 引言 Tomcat 在部署 Web 应用的时候,是将应用放在 webapps 文件夹目录下,而 webapps 对应到 Tomcat 中是容器 Host ,里面的文件夹则是对应到 Context ...
- javascript之判断数组的几种方法
今天和小伙伴一起出去吃饭,有个小伙伴突然问我,你是前端是吧,问一下现在前端判断数组都有哪些方法,哈哈不知道是不是考我,当时没有说全,吃过饭后看了下自己以前的小笔记这里总结一下目前知道的所有对于数组的判 ...
- 序列化的JavaScript
下载 序列化的JavaScript序列化的JavaScript 将JavaScript序列化为包含正则表达式.日期和函数的JSON超集. 概述 这个包中的代码最初是作为表示状态的内部模块.为了扩展它的 ...
- postgresql 和 mysql 数据库备份恢复以及时区问题
概要 postgesql 12 备份/恢复脚本 时区设置 mysql 5.6 备份/恢复脚本 时区设置 概要 postgresql 和 mysql 是最常用的 2 种开源关系数据库, 很多项目也会优先 ...
- Sqlite嵌入式数据库讲解
在计算机系统中,保存数据的方式一般有两种:1. 普通文件方式2. 数据库方式 相比于普通文件方式,使用数据库来管理大批量数据具有更高的效率与安全性. 数据库系统一般由3个部分构成1. 数据库2. 数据 ...