webpack初体验

  1. 如果没装 webpack 就先装一下,命令行输入npm i webpack -g
  2. 新建一个项目
  3. 创建一个空的项目
  4. 定义一个名称
  5. 创建一个Module
  6. 选择静态 web
  7. 输入名称
  8. 输入 npm init -y
  9. 在Module下新建两个目录 dist 和 src ,并且在src 下 新建 index.html 与 main.js
  10. index.html 内容为
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>
  1. main.js 内容为
console.log("webpack初体验");
  • 执行 npm i webpack-dev-server -S
  • 执行 npm i webpack -S
  • 执行 npm i webpack-cli -S

  1. 在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

  1. 执行 npm i html-webpack-plugin -S
  2. 在 main.js 中添加 console.log("webpack集成html-webpack-plugin");
  3. 在 webpack.config.js 中添加
//在内存中生成模版页面

var htmlWebpackPlugin = require("html-webpack-plugin");
  1. 在 webpack.config.js 中 output 后添加 , 之后添加
    plugins: [

        new htmlWebpackPlugin({

            template: path.join(__dirname, "./src/index.html"),//指定模版文件路径

            filename: "index.html"//设置内存中页面名称

        })

    ]
  1. 现在的 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"//设置内存中页面名称

        })

    ]

};
  1. 这时候就可以删除 index.html 中的 script 引入
  2. 执行 npm run dev

webpack集成 style-loader 和 css-loader

  1. 执行 npm i style-loader css-loader -S
  2. 在 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"
  1. 在 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文件的规则

        ]

    }

};
  1. 执行 npm run dev

webpack 集成 less-loader

  1. 执行 npm i less-loader less -S
  2. 在 webpack.config.js 中添加匹配规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

3.添加之后内容为

webpack集成 sass-loader

  1. 执行 npm i sass-loader node-sass -S
  2. 在 webpack.config.js 中添加匹配规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  1. 添加之后内容为

webpack集成 url-loader 和 file-loader

  1. 执行 npm i url-loader file-loader -S
  2. 在 index.html 的 body 标签中添加 <div class="diy01"></div>
  3. 在 css 目录下的 index.css ,添加
.diy01

{

    width: 320px;

    height: 214px;

    background-color: aquamarine;

}
  1. index.css 此时的效果是
  2. 执行 npm run dev 发现修改的内容已经成功了
  3. 在 src 下创建目录 images 放入一张图片
  4. 把 index.css 的 .diy01 修改为
.diy01

{

    width: 320px;

    height: 214px;

    background: url("../images/daniu.jpg");

    background-size: cover;

}
  1. 修改后的内容为
  2. 在 webpack.config.js 中添加匹配规则
{test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
  1. 添加后 webpack.config.js 匹配规则内容为
  2. 执行 npm run dev

webpack集成 bootstrap

  1. 执行 npm i bootstrap@3 -S
  2. 在 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

  1. 执行以下命令,因为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

  1. 在 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的更多相关文章

  1. Spring Cloud Alibaba 初体验(三) Nacos 与 Dubbo 集成

    一.新建项目 新建项目,只放置接口,用于暴露 Dubbo 服务接口 public interface GreetingService { String greeting(); } 二.provider ...

  2. webpack初体验

    本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是 ...

  3. Webpack 2 视频教程 004 - Webpack 初体验

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  4. webpack初体验之模块化开发

    写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...

  5. Spring boot集成Rabbit MQ使用初体验

    Spring boot集成Rabbit MQ使用初体验 1.rabbit mq基本特性 首先介绍一下rabbitMQ的几个特性 Asynchronous Messaging Supports mult ...

  6. Java高级特性1_流库_初体验

    Java高级特性流库_初体验 面对结果编程 在编程里, 有两种编程方式, 一种是面对过程编程, 一种是面对结果编程. 两者区别如下 面向过程编程 面向过程编程需要编程程序让程序依次执行得到自己想要的结 ...

  7. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

  8. QT visual stuido 集成插件不能打开ui文件的解决方法（去掉xml的UTF8标记）

    QT visual stuido 集成插件不能打开ui文件的解决方法 visual studio里不能打开这个ui文件,出现warning等解决方法是:于是将<?xml version=&quo ...

  9. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

随机推荐

  1. layui-简单的登录注册界面【转载】

    register.html 源代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ...

  2. Web实现前后端分离，前后端解耦

    一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...

  3. [Spark] Spark 3.0 Accelerator Aware Scheduling - GPU

    Ref: Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU) 预览版本:https://archive.apache.org/dist/spark/spark-3.0.0-p ...

  4. 搭建Kubernetes容器集群管理系统

    1.Kubernetes 概述 Kubernetes 是 Google 开源的容器集群管理系统,基于 Docker 构建一个容器的调度服务,提供资源调度.均衡容灾.服务注册.劢态扩缩容等功能套件. 基 ...

  5. java.lang.RuntimeException: org.dom4j.DocumentException: 1 字节的 UTF-8 序列的字节 1 无效。

    向一个XML文件写入出现异常 解决办法:使用记事本打开该XML文件,另存为,编码选择UTF-8 java.lang.RuntimeException: org.dom4j.DocumentExcept ...

  6. java内存模型的原子性、可见性、有序性与指令重排序

    在并发编程中,我们通常会遇到以下三个概念:原子性.可见性和有序性.我们先看具体看一下这三个概念: 1.原子性 操作时不可分割的比如a=0,此操作不可分割,而++a,实际上是a=a+1,为两个操作.想将 ...

  7. pageoffice实现网页打开编辑保存word文档(基于SSM框架)

    pageoffice是一款网页集成word.excel...等office工具 并不免费,但可以试用练习 SSM框架搭建过程就省略了 注意:由于谷歌/火狐升级,不支持插件嵌入,建议使用POBrowse ...

  8. 华三F100系列、华为USG6300系列防火墙 策略路由配置实例

    策略路由,是一种比基于目标网络进行路由更加灵活的数据包路由转发机制,路由器将通过路由图决定如何对需要路由的数据包进行处理,路由图决定了一个数据包的下一跳转发路由器. 策略路由的应用: 1.可以不仅仅依 ...

  9. Javadoc文档生成工具-自定义版

    先上图来一波 本身JDK自带了doc文档生成工具,但是不支持排除类,方法,属性,虽然有个@deprecated可以使用,但是达不到我想要的结果(类会被标记为废弃类,编译使用时会提示), 而且类说明示例 ...

  10. Loj 2230. 「BJOI2014」大融合 (LCT 维护子树信息）

    链接:https://loj.ac/problem/2230 思路: 设立siz数组保存虚点信息,sum表示总信息 维护子树信息link操作和access操作需要进行一些改动 可参考博客:https: ...