使用ExtractTextPlugin将css和js分开打包

第一步：首先你要有对应的样式环境

首先需要安装

npm install stylus-loader css-loader style-loader --save-dev

接下来
（1）使用less

npm install less less-loader --save-dev

（2）使用scss

npm install sass sass-loader --save-dev

（3)安装ExtraTextPlugin

npm install extract-text-webpack-plugin --save-dev

第二步：配置webpack

在 build–webpack.base.conf.js 文件中配置

这里我使用的是less，配置如下：


const ExtractTextPlugin = require('extract-text-webpack-plugin');module: {rules: [...(config.dev.useEslint ? [createLintingRule()] : []),{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}},{test: /\.less$/,exclude: "/node_modules/",use: ExtractTextPlugin.extract({fallback: "style-loader",use: [{loader: "css-loader",options: {minimize: true}},{loader: "postcss-loader"},{loader: "less-loader"}]})},]},plugins: [new ExtractTextPlugin("styles.css")],

第三步：在页面中使用样式

<style lang="less" scoped>
.title {color: red;
}

使用ExtractTextPlugin将css和js分开打包相关推荐

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度
介绍使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并 ...
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler
ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...
webpack配置：css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{color:red;font-size:20px; } 2.css建立好后,需要引入 ...
Vue-cli 打包CSS、JS找不到路径问题，解决方案
Vue-cli 打包CSS.JS找不到路径问题,解决方案 vue文件打包之后发现路径报错,检查了index文件之后发现js和css的路径为这样,发现static前面多了一个斜杠,所以导致路径错误- & ...
RequireJs按需要加载angular模块和依赖，并且用r.js压缩打包js和css文件实现加载优化（图文）。
RequireJS 是一个JavaScript模块加载器,使用RequireJS加载模块化脚本将提高代码的加载速度和质量.而且能保证其他依赖angular插件前提下才能使用的组件比如像自定义的指令和路 ...
webpack4.x实战七，生产模式和开发模式分开打包
生产模式中,要求css和js文件尽可能小,因此需要把css和js文件压缩:开发模式中,要便于代码的调试,不能压缩css和js文件. 使用webpack-merge 安装插件webpack-merge ...
如何用js获取外联css,内联外联CSS和JS
内联CSS 代码示例: 这里文字是红色. 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度 ...
node.js之打包工具webpack
什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 为什么重复造轮子市面上已经存在的模块管理和打包工具并不 ...
Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...

使用ExtractTextPlugin将css和js分开打包

第一步：首先你要有对应的样式环境

第二步：配置webpack

第三步：在页面中使用样式

使用ExtractTextPlugin将css和js分开打包相关推荐

最新文章

热门文章

使用ExtractTextPlugin将css和js分开打包

第一步： 首先你要有对应的样式环境

第二步： 配置webpack

第三步：在页面中使用样式

使用ExtractTextPlugin将css和js分开打包相关推荐

最新文章

热门文章

第一步：首先你要有对应的样式环境

第二步：配置webpack