webpack初体验_集成插件_集成loader
webpack初体验
- 如果没装
webpack
就先装一下,命令行输入npm i webpack -g
- 新建一个项目
- 创建一个空的项目
- 定义一个名称
- 创建一个Module
- 选择静态 web
- 输入名称
- 输入
npm init -y
- 在Module下新建两个目录
dist
和src
,并且在src
下 新建index.html
与main.js
index.html
内容为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
main.js
内容为
console.log("webpack初体验");
- 执行
npm i webpack-dev-server -S
- 执行
npm i webpack -S
- 执行
npm i webpack-cli -S
- 在Module下新建文件
webpack.config.js
内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");
//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
entry: path.join(__dirname, "./src/main.js"),//入口文件
output: {
path: path.join(__dirname, "./dist"),//输出路径
filename: "bundle.js"//执行输出文件的名称
}
};
13. 执行 npm run dev
14. 如果有打印 就表示成功了~!!!
webpack集成 html-webpack-plugin
- 执行
npm i html-webpack-plugin -S
- 在
main.js
中添加console.log("webpack集成html-webpack-plugin");
- 在
webpack.config.js
中添加
//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");
- 在
webpack.config.js
中 output 后添加,
之后添加
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
filename: "index.html"//设置内存中页面名称
})
]
- 现在的
webpack.config.js
内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");
//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");
//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
entry: path.join(__dirname, "./src/main.js"),//入口文件
output: {
path: path.join(__dirname, "./dist"),//输出路径
filename: "bundle.js"//执行输出文件的名称
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
filename: "index.html"//设置内存中页面名称
})
]
};
- 这时候就可以删除
index.html
中的 script 引入 - 执行
npm run dev
webpack集成 style-loader
和 css-loader
- 执行
npm i style-loader css-loader -S
- 在
src
目录下 新建css
目录,在css
目录下新建index.css
文件,内容为
body
{
background: gray;
}
3. 在 main.js
中添加console.log("webpack集成 load之style-loader css-loader");
和 import "./css/index.css"
,添加之后的内容为
console.log("webpack初体验");
console.log("webpack集成html-webpack-plugin");
console.log("webpack集成 load之style-loader css-loader");
import "./css/index.css"
- 在
webpack.config.js
中 plugins 后添加,
再添加
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
]
}
5. 添加后的内容为
//webpack是基于node进行构建的,所以支持node语法
var path = require("path");
//在内存中生成模版页面
var htmlWebpackPlugin = require("html-webpack-plugin");
//当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
//这时会检查项目中的配置文件,并读取这个文件
module.exports = {
entry: path.join(__dirname, "./src/main.js"),//入口文件
output: {
path: path.join(__dirname, "./dist"),//输出路径
filename: "bundle.js"//执行输出文件的名称
},
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
filename: "index.html"//设置内存中页面名称
})
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
]
}
};
- 执行
npm run dev
webpack 集成 less-loader
- 执行
npm i less-loader less -S
- 在
webpack.config.js
中添加匹配规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
3.添加之后内容为
webpack集成 sass-loader
- 执行
npm i sass-loader node-sass -S
- 在
webpack.config.js
中添加匹配规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
- 添加之后内容为
webpack集成 url-loader
和 file-loader
- 执行
npm i url-loader file-loader -S
- 在
index.html
的 body 标签中添加<div class="diy01"></div>
- 在
css
目录下的index.css
,添加
.diy01
{
width: 320px;
height: 214px;
background-color: aquamarine;
}
index.css
此时的效果是- 执行
npm run dev
发现修改的内容已经成功了 - 在
src
下创建目录images
放入一张图片 - 把
index.css
的 .diy01 修改为
.diy01
{
width: 320px;
height: 214px;
background: url("../images/daniu.jpg");
background-size: cover;
}
- 修改后的内容为
- 在
webpack.config.js
中添加匹配规则
{test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
- 添加后
webpack.config.js
匹配规则内容为 - 执行
npm run dev
webpack集成 bootstrap
- 执行
npm i bootstrap@3 -S
- 在
index.html
的div 标签下添加
<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
3. 在 main.js
中添加
/*import "../node_modules/bootstrap/dist/css/bootstrap.css"*/
/*node_modules中的可以省略*/
import "bootstrap/dist/css/bootstrap.css"
4. 再把 package.json
中的 "dev"
修改为,删除了 --contentBase src
"dev": "webpack-dev-server --open --port 2198 --hot"
5. 在 webpack.config.js
中添加匹配规则
//处理字体文件的loader,bootstrap小图标就是使用这个
{test:/\.(eot|svg|ttf|woff|woff2)$/,use:'url-loader'},
6. 执行 npm run dev
显示心形小图标
webpack集成 babel-loader
- 执行以下命令,因为babel-loader默认安装8,不支持,所以指定版本7
npm i babel-core babel-loader@7 babel-plugin-transform-runtime -S
npm i babel-preset-env babel-preset-stage-0 -S
- 在
main.js
中添加
class Student
{
static stu_info = {name: "大牛", age: "18"}
}
console.log(Student.stu_info);
3. 在根目录 创建文件 .babelrc
内容为
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
4. 在 'webpack.config.js' 中添加匹配规则
// 配置 babel-loader 来转换高级的ES语法
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
5. 执行 npm run dev
webpack初体验_集成插件_集成loader的更多相关文章
- Spring Cloud Alibaba 初体验(三) Nacos 与 Dubbo 集成
一.新建项目 新建项目,只放置接口,用于暴露 Dubbo 服务接口 public interface GreetingService { String greeting(); } 二.provider ...
- webpack初体验
本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是 ...
- Webpack 2 视频教程 004 - Webpack 初体验
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- webpack初体验之模块化开发
写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...
- Spring boot集成Rabbit MQ使用初体验
Spring boot集成Rabbit MQ使用初体验 1.rabbit mq基本特性 首先介绍一下rabbitMQ的几个特性 Asynchronous Messaging Supports mult ...
- Java高级特性1_流库_初体验
Java高级特性流库_初体验 面对结果编程 在编程里, 有两种编程方式, 一种是面对过程编程, 一种是面对结果编程. 两者区别如下 面向过程编程 面向过程编程需要编程程序让程序依次执行得到自己想要的结 ...
- 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...
- QT visual stuido 集成插件不能打开ui文件的解决方法(去掉xml的UTF8标记)
QT visual stuido 集成插件不能打开ui文件的解决方法 visual studio里不能打开这个ui文件,出现warning等解决方法是:于是将<?xml version=&quo ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
随机推荐
- C标准库中转换wchar_t和char类型的字符串
C 库函数 - mbstowcs() C 标准库 - <stdlib.h> 描述 C 库函数 size_t mbstowcs(schar_t *pwcs, const char *str ...
- linux系统中的一些典型问题汇总
一.文件系统破坏导致系统无法启动:Checking root filesystem/dev/sda6 contains a file system with errors,check forcedAn ...
- sqlserver2008 job设定
数据同期: update owk ),td.) ,owk.RecordEndTime),td.) from openrowset( 'SQLOLEDB ', '172.17.1.14'; 'read' ...
- Canal——增量同步MySQL数据到ElasticSearch
1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.x版本,目前貌似不支持7.x版本: Kibana:6.x版本: Canal.deployer:1 ...
- main.js中的Vue.config.productionTip = false
开发模式:npm run dev是前端自己开发用的生产模式:npm run build 打包之后给后端放在服务端上用的Vue.config.productionTip = false1上面这行代码的意 ...
- USACO 1.1 Greedy Gift Givers
模拟. 如果用$map$的话,会很好写. 如果你不会$map$的话,在此小广告:https://blog.csdn.net/CQBZLYTina/article/details/80063739 /* ...
- Git提交本地项目文件到GitHub的详细操作
因最近在使用git命令提交代码到github的操作,网上找了下教程,记录下过程,便于查看 添加整个文件夹及内容 git add 文件夹/ 添加目录中所有某种类型的文件 git add *.文件类型 `
- java.lang.ClassNotFoundException: org.apache.commons.dbutils.ResultSetHandle
原因是这两个地方都得导入dbutils的jar包,一般出错是因为WEB-INF下没有导入包,记得导入,然后buildPath即可
- POSTGRESQL日期函数大全
一:各个数据中的连接符 SqlServer的连接符:+(加号) Sqlite的连接符:.(点) PostgreSQL的连接符:||(或) 二: 今天在PostgreSQL计算日期的时候,翻了一些资料, ...
- PAT B1036 跟奥巴马一起编程 (15)
AC代码 #include <cstdio> using namespace std; int main(){ int n = 0, m = 0; char a; scanf(" ...