接着上一个博客来实现webpack的loader实现，

首先实现在html中无需引入script标签下的bundle.js

在引用boostrap4时要额外添加一个依赖，因为boostrap4没有字体图标了，下面会介绍是什么依赖，
首先执行npm install html-webpack-plugin --save-dev
然后在webpack.config.js中配置

const path=require('path')//自己调用自己
const htmlwebpackplugin=require('html-webpack-plugin')//调用html-webpack-pluginmodule.exports={devServer: {inline:true,port:8080//设置默认端口},entry:path.join(__dirname,'./src/main.js'),//输入路径output: {path: path.join(__dirname,'./dist'),//输出的路径filename: "bundle.js"//输出的文件名},plugins:[new htmlwebpackplugin({template:path.resolve(__dirname,'src/index.html'),filename: 'index.html',})],}

使用webpack打包css文件操作

执行npm install style-loader css-loader --save-dev
之后再webpack.config.js增加module这个配置

module: {rules: [//文件的匹配规则 加载器{test:/\.css$/, use: ['style-loader','css-loader']},//   /\.css$/是正则表达式(.是原字符，\是转义，结尾符用$)匹配所有以css结尾的文件。use是表示要利用哪些第三方loader文件},//或者自定义loaderrules: [{test: /\.js$/,use: [// loader 的执行顺序从下到上,即先用 loader1 处理源码，然后将处理后的代码再传给 loader2。{loader: path.resolve('./src/loader2.js'),},{loader: path.resolve('./src/loader1.js'),},]}
]

配置完module这个之后，还需要在main.js中引入css即可

import './css/index.css'

如要加boostrap的文件操作的话，在module中添加

{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'},//处理boostrap的字体文件的loader

在main.js中引入

import 'bootstrap/dist/css/bootstrap.css'//引用boostrap4，boostrap4没有了字体图标了
import 'open-iconic/font/css/open-iconic-bootstrap.css'//要先在package.json安装此依赖"open-iconic": "git+https://github.com/iconic/open-iconic.git",

vue 的loader

{test:/\.vue$/, use: "vue-loader"}

在此之后可以在main.js中更改成，需要引入的外部样式都是在main.js中引入，从而达到实现代码模块管理

webpack配置一些loder，如boostrap4，css等相关推荐

nuxt webpack配置css,基于nuxt通过webpack配置ant-Design-vue的主题切换配置
1.首先在nuxt官网初始化好基于ant-Design-vue的项目, 安装.png 选择ant-Design-vue UI框架 2.初始化完成,查找package.json是否安装了less与les ...
nuxt webpack配置css,nuxt笔记
初始化: vue init nuxt/starter (类似 vue init webpack) 配置IP和端口: 配置全局CSS 配置webpack的loader nuxt路由配置和传参 Nuxt ...
js变量传递给less_如何利用webpack实现一键换肤（CSS变量替换）
最近公司项目中有一个需要更换web端主题的需求,基本实现效果如下: 接收到这个需求的时候有三种思路: 打包的时候同时冗余打包多套CSS文件,并在切换主题的时候加载相应的样式文件. 在根组件上加上主题类 ...
webpack 配置简单说几句？
webpack 前言这几天在准备一个单页面应用, 准备试试webpack神器,在准备webpack下的知识点,顺便记录下一些使用的心得. webpack 的配置说明在近来的前端开发中,业务逻辑复杂 ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
webpack配置模块的查找范围
一般我们的入口文件会引入一下公共的样式文件,比如这样 import './style' 但是这个样式文件并不会生效呀,因为你的写法不对鸭,你要把文件的后缀名也要写 import './style.cs ...
常用的webpack 配置
const path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); let VueLoaderP ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...
webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...

webpack配置一些loder，如boostrap4，css等

接着上一个博客来实现webpack的loader实现，

首先实现在html中无需引入script标签下的bundle.js

使用webpack打包css文件操作

在此之后可以在main.js中更改成，需要引入的外部样式都是在main.js中引入，从而达到实现代码模块管理

webpack配置一些loder，如boostrap4，css等相关推荐

最新文章

热门文章