需要将btn.less文件用webpack打包后,放到项目中。在网上百度了各种,遇到了很多问题,现在我将整个步骤整理如下:

1、建一个空的文件夹,命名为init_webpack,在该文件夹下运行:

这里需要注意,安装的是3.xx版本的webpack,安装4以上版本会跟extract-text-webpack-plugin插件有冲突

//全局安装webpack
npm install -g webpack@3
//在你的项目目录下安装
npm install --save-dev webpack@3

2、创建package.json文件,在该文件夹下运行:

npm init

3、在init_webpack文件夹下建一个src文件夹,里面建一个main.js作为入口文件,将需要打包的btn.less也放入该文件夹下,如图所示

main.js

import './btn.less';

我用的webstorm,这里需要设置下javascript的版本,如图:

4、在init_webpack文件夹下建建一个webpack.config.js文件

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader'],
}),
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
"less-loader"
]
})
},
]
},
plugins: [
new ExtractTextPlugin("btn.css")
]
};

这里需要安装几个插件

extract-text-webpack-plugin、css-loader、less、less-loader

5、运行webpack打包,dist文件夹中的btn.css就是打包后的文件

6、如果要压缩btn.css文件

安装插件:

npm install --save-dev optimize-css-assets-webpack-plugin@3

在webpack.config.js文件中加入如下代码:

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

以下这段加在plugins中:

new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
canPrint: true
})

7、这是所有安装的插件以及版本,因为插件版本出现很多次问题,所以需要注意一下

webpack单独打包一个less文件的更多相关文章

  1. webpack 单独打包指定JS文件(CopyWebpackPlugin)

    背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...

  2. webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  3. webpack中打包拷贝静态文件CopyWebpackPlugin插件

    copyWebpackPlugin: 作用:用于webpack打包时拷贝文件的插件包 安装:npm install copyWebpackPlugin@版本号 使用:// copy custom st ...

  4. Highcharts教程--把js代码从html中抽离出来,放到单独的一个js文件中。由html页面调用

    1.html页面写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. webpack分离css单独打包

    这篇文章过期了,webpack4.x已经不这么用了,最新的可以看这个地址webpack实战场景系列 原文地址:http://www.izhongxia.com/posts/44724.html CHA ...

  6. 如何将Debug文件夹下的资源打包成一个EXE文件直接执行

    前言:前段时间写了个小程序,想分享给好友看看,可所以资源都放在Debug文件夹下,整个文件夹发给人家这也太……,为了显得稍微专业一点,想把它们打包一个EXE文件执行,因为我见到到这样的程序,直接一个E ...

  7. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  8. [Python][小知识][NO.5] 使用 Pyinstaller 打包成.exe文件

    1.安装 pyinstaller 插件 cmd命令:pip install PyInstaller PS . o.o 不知道 easy_install 的百度吧. 2.pyinstaller 简介 他 ...

  9. 将 Python 程序打包成 .exe 文件

    1.简介 做了一个excel的风控模板,里面含有宏,我用python的第三方xlwings部署到linux后发现,linux环境并不支持xlwings. Python 程序都是脚本的方式,一般是在解析 ...

随机推荐

  1. swift学习网站

    http://letsswift.com/category/swiftguide/http://www.imooc.com/course/list?is_easy=3&c=ioshttp:// ...

  2. theano学习指南5(翻译)- 降噪自动编码器

    降噪自动编码器是经典的自动编码器的一种扩展,它最初被当作深度网络的一个模块使用 [Vincent08].这篇指南中,我们首先也简单的讨论一下自动编码器. 自动编码器 文献[Bengio09] 给出了自 ...

  3. Reviewing the Blog Module

    Reviewing the Blog Module Throughout the tutorial, we have created a fully functional CRUD module us ...

  4. Asp.net 上传文件小叙(修改FileUpload显示文字等)

    想要在asp.net网站上上传文件就得用到FileUpload,可是这个控件中“浏览”没法修改,可以使用html中<input type="file" 来解决该问题. 首先页 ...

  5. dubbo在企业中用得多吗?

    看了阿里的dubbo,据说是一个不错的服务框架, 不过,好像Minglisoft.technology搞研发希望各位可以指点学习 想知道其他的公司用这个框架多吗?遇到的问题能否快速解决呢?抉择中...

  6. 第一次上机,HTML静态网页的开发

    <html> <head> <title>第一次上级,cyy</title> </head> <body> <h3 ali ...

  7. Flink--基于mysql的sink和source

    基于mysql的source操作 object MysqlSource { def main(args: Array[String]): Unit = { val env = StreamExecut ...

  8. Latex 公式居中

    这么简单的功能要是还要加工具包,LaTeX也不用混了~ 公式用\[...\]来写可以达到公式居中效果. 或者在equation环境外加center环境: \begin{center} \begin{e ...

  9. nginx多站点配置

    一.安装nginx https://yq.aliyun.com/articles/101144?spm=5176.10695662.1996646101.searchclickresult.70af9 ...

  10. js一些常用方法总结

    这两天开始在牛客网上做一些js在线编程,发现很多编程题其实调用的js方法都差不多一样,所以觉得可以汇总一下,方便记忆也可以多多熟悉. 1.slice()方法 这个方法就是可以从已有的数组中返回选定的元 ...