webpack基本配置（包含配置样式，处理图片和字体图标）

最新推荐文章于 2024-01-19 22:56:57 发布

遥不可及卿何意

最新推荐文章于 2024-01-19 22:56:57 发布

阅读量640

点赞数

分类专栏： Webpack 文章标签： bootstrap webpack 前端 css

本文链接：https://blog.csdn.net/cc0429xy/article/details/108404171

版权

Webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先创建这几个文件，和文件夹。

在这里插入图片描述

初始化包

在根目录下：npm init -y 会生成package.json文件

在这里插入图片描述

这main.js是项目的js入口文件…

里面写：console.log('ok~~~');做测试用

在命令窗口中下载：

webpack ./src/main.js -o ./dist/bundle.js
cnpm i webpack-dev-server -D
cnpm i webpack -D
cnpm i webpack-cli -D
cnpm i html-webpack-plugin -D

在package.json文件的“scripts”里面添加一条：

"dev": "webpack-dev-server --open --port 3000  --hot"

在根目录里创建webpack.config.js配置文件，并写入

var path=require('path')

var htmlWebpackPlugin =require('html-webpack-plugin')


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'
        })
    ],
}

在命令行中:

npm run dev

运行出页面：
在这里插入图片描述

说明：-------------------------------------------

webpack作用：
1. 可以处理js文件的相互依赖关系
2. 能够处理js的兼容问题，把高级的、浏览器不能识别的语法，转换为浏览器正常识别的语法语法： webpack 要打包的文件地址 -o 修改后的地址
每次都要重新写 webpack 要打包的文件地址 -o 修改后的地址这样子太长了。
可以在根目录写一个配置文件webpack.config.js，就只要输入webpack回车就可以了

但是还是要再输入webpack回车，

程序员最大的美德就是懒，于是~~

可使用webpack-dev-server这个工具，实现自动编译打包：
1. 把这个工具安装到项目的本地开发依赖
2. 安装完毕后，这个工具的用法和webpack命令的用法完全一样
3. 由于这里是在项目中本地安装的，就不能把它当做脚本命令在povershell终端中直接运行
4. webpack-dev-server这个工具，如果想要正常运行，要求在本地项目中必须安装webpack（不是全局）
  ----在package.json里加 "dev": "webpack-dev-server"
  ---- 也可以加强版："dev": "webpack-dev-server --open(自动打开页面) --port 3000(设置打开端口号) --contentBase src(自动打开的根目录是src) --hot(1.不重新生成bundle.js，只更新修改过的部分。1.不刷新就改变页面) "
npm i webpack -D
npm i webpack-cli -D
npm run dev
1. webpack-dev-server打包好的bundle.js文件没有存放到实际的物理磁盘中，直接托管到电脑的内存里，我们在项目根目录中看不到这个文件

说明结束----------------------------------继续

在index.html里写入一些东西：

  <p>
    最爱~~ 烧烤，money，奶油蛋糕
  </p>
  
  <div class="box1">
    可可爱爱，没有脑袋...
  </div>
  <div class="box2">
    好好学习...
  </div>

然后在css文件里，创建index.css，并写入相应样式

body {
    background-color: papayawhip;
    font-size: 16px;
}
.box1,.box2 {
    width: 200px;
    height: 150px;
    font-size: 12px;
    margin: 40px auto;
    text-align: center;
    line-height: 150px;
    box-shadow: 10px 0 10px purple;
    background-color: palevioletred;
}

下载css相关路由：

cnpm i style-loader css-loader -D

import './css/index.css'

在webpack.config.js文件中配置相关路由（与plugins同级添加以下代码）：

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
        ]
}

便可以再次运行查看 npm run dev
在这里插入图片描述

less和sass文件操作类似：

less：

javascript import './css/index.less'

cnpm i less-loader less -D

{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, ```

sass：

javascript import './css/index.scss'

cnpm i sass-loader node-sass -D

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, ```

接下来是插入背景图片的操作：

webpack 默认只能打包处理js类型的文件，无法处理其他的非js类型的文件
要处理非js类型的文件，要手动安装一些合适的第三方loader加载器
1.要处理css文件，要安装npm i style-loader css-loader -D
2.打开webpack-config.js文件，在里面新增一个配置节点，叫做module，它是一个对象在这个module对象上有个rules属性，这是一个数组，存放了所有第三方文件的匹配和处理规则

默认情况下webpack不能处理css文件中的url地址，不管是图片还是字体库

cnpm i url-loader file-loader -D

在两个image文件夹中放入图片（这里两个名字是一样的）
在index.css文件中写入样式：

.box1{
    background:url('../images/bg.jpg') no-repeat;
    background-size: 100% 100%;
}
.box2{
    background:url('../images2/bg.jpg') no-repeat;
    background-size: 100% 100%;
}

在webpack.config.js文件中配置相关路由（处理图片路径的loader）：

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=8908&name=[hash:8]-[name].[ext]'},

在这里插入图片描述

说明：-------------------------------------------

两个image文件夹中放入图片（上面放的两个名字是一样的）

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader’},

网页中图片的路径是：url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB。。。。。。A/9k=)
no-repeat

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=8900’},

网页中图片的路径是：url(b9a9e77….jpg) no-repeat;

limit给定的值是图片的大小，单位byte，如果我们引用的图片，大于等于给定的limit值，这不会被转换成base64格式的字符串，反之…（但是我测的相等也是会变成base64格式）
图片–右键–>属性---->看大小

{test:/.(jpg|png|gif|bmp|jpeg)$/,use:‘url-loader?limit=8908&name=[hash:8]-[name].[ext]’},

hash值共32位，这里取前8位

说明结束----------------------------------继续

接下来是引入字体图标的操作：

在index.html文件中写入一个bootstrap的字体图标：

<span class="glyphicon glyphicon-send"></span>

下载bootstrap：

cnpm i bootstrap@3.3.7 -S

~~cnpm i bootstrap -S~~ （第一次装的不行，后来经过一下午的测试，发现是因为下载的版本不可以，于是后来删包，改package.json里了版本号再 ----> npm install)。所以这次我就直接下载了指定的版本。

引入方式：

直接在index.html文件里引入（下面是本地路径引入，也可以用网上地址引入）：

 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

成功：
在这里插入图片描述

用import方式引入：

在main.js文件中写入

//如果通过路径的形式引入node_modules中相关文件，可以省略前面的，直接写后面的路径。
import 'bootstrap/dist/css/bootstrap.css'

在webpack.config.js文件中配置相关路由

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},

如果没有配置会出现这样的错误：

成功：
这种方式引入，会出现部分样式不能显示，body的背景颜色就变成白色的了

初步判断是因为样式被覆盖了，层级不够高。
于是我在各种未显示的样式加了！important，然后就可以了

顺便修改了一些样式，让它好看一丢丢~~

在这里插入图片描述

注意：

. json文件里不能写注释
‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序或批处理文件：要看node_modules里有没有。可以 "删包 ---- cnmp i "
下载用cnpm，开始一直用npm后来下载sass时下载不成功就用cnpm了
npm i sass-loader -D ----> npm i node-sass -D 下载不成功，需要用cnpm下载，于是先安装cnpm：npm install -g cnpm
-registry=https://registry.npm.taobao.org ----> cnpm i node-sass -D

webpack处理第三方文件类型的过程：