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 ...
随机推荐
- 什么是垃圾搜集(GC)?为什么要有GC呢？
GC的全称是Gabage Collection,翻译过来就是"垃圾收集"的意思.那么我们为什么用GC呢? 那么我们接下来就来聊一聊GC的创造背景.在C和C++那个年代的程序员界的长 ...
- 基于python的webUI自动化-小白基础篇
最近打算研究一下基于python的webUI自动化,先自学了一下相关基础知识,大概用了一个多月的时间,主要是找视频,一边看视频或者文档一边对照着敲代码运行. 重点强调:一定要一边看一边对照着敲代码运行 ...
- 基础篇：java基本数据类型
1:java几种基本数据类型大小 关键字 类型 位数 (8位一字节) 取值范围(表示范围) byte 整型 8 -2^7 ~ 2^7-1 short 整型 16 -2^15 ~ 2^15-1 int ...
- C# Web Service简介及使用
一. 软件开发的形式 1.SaaS:Software as a Service(软件即服务) (1)将软件视为一种基础设施与服务 (2)网络无所不在,网络可以看成是一个软件服务的聚合体,是一个超级大& ...
- 正睿十一A班模拟赛day1
估分:25+0+60=85 实际:25+0+60=85 T1: 就只会25的暴力 分治,到一个区间[l,r],cnt[i]表示i这个颜色在区间内的出现次数,从两头同时扫描,扫描到第一个cnt[i]小于 ...
- 【开源】Springboot API 一键生成器
Springboot API 一键生成器 写这个项目,最大的想法就是:不做CRUD 程序猿 Springboot 在我们平时开发项目当中,是如此的常用.然而,比如平时我们写的一些: XX 管理系统 X ...
- 多测师讲解selenium _携程选票定位练习_高级讲师肖sir
打开携程网 from selenium import webdriverfrom time import sleepfrom selenium.webdriver.common.keys import ...
- 多测师讲解python_函数调用方法__高级讲师肖sir
(一)函数的介绍 函数:一个工具,随调随用优点:# 降低代码冗余# 增加代码的复用性,提高开发效率# 提高程序扩展性# 函数有两个阶段:定义阶段,调用阶段.# 定义时:只检查函数体内代码语法,不执行 ...
- MeteoInfo 新网站
MeteoInfo特别是MeteoInfoLab的推广需要写大量详细的帮助文档和示例程序,MeteoInfo原先的网站使用最原始的编写.html文件的方式来更新,效率实在太低,最近学习了一下Sphin ...
- 基于python实现顺序存储的栈
""" 栈 sstack.py 栈模型的顺序存储 重点代码 思路总结: 1.列表是顺序存储,但功能多,不符合栈的模型特征 2.利用列表,将其封装,提供接口方法 " ...