构建登录页面:css提取(不打包到js中)
来源:互联网 发布:淘宝买兔子死了 编辑:程序博客网 时间:2024/05/22 07:00
https://github.com/webpack/extract-text-webpack-plugin
安装:
npm install extract-text-webpack-plugin --save-dev
1.新建一个css,./src/css/user.css:
h2{color: blue}
./src/login.js:
require('./css/user.css');
2.如果就这样打包,最后css肯定会打包到js脚本。所以,就需要上面介绍的插件了。
修改webpack配置文件,加入:
var extractTextPlugin = require('extract-text-webpack-plugin');
module:{ loaders:[ // {test:/\.css$/,loader:'style-loader!css-loader'}, {test:/\.css$/,loader:extractTextPlugin.extract('style','css')} ], },
plugins:[ // css抽取 new extractTextPlugin("[name].css"), ]
webpack.config.js全部代码:
var HtmlWebpackPlugin = require('html-webpack-plugin');var webpack = require('webpack');var extractTextPlugin = require('extract-text-webpack-plugin');module.exports = { // entry是入口文件,可以多个,代表要编译那些js //entry:['./src/main.js','./src/login.js','./src/reg.js'], entry: { 'main':'./src/main.js', 'user':['./src/login.js','./src/reg.js'] }, externals:{ 'jquery':'jQuery' }, module:{ loaders:[ // {test:/\.css$/,loader:'style-loader!css-loader'}, {test:/\.css$/,loader:extractTextPlugin.extract('style','css')} ], }, output:{ path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录) filename:'build.js' //最终打包生产的文件名 }, plugins:[ new HtmlWebpackPlugin({ filename: __dirname+'/build/html/login-build.html', template:__dirname+'/src/tpl/login.html', inject:'body', hash:true }), // 拆分插件 new webpack.optimize.CommonsChunkPlugin({ name:'user', // 上面入口定义的节点组 filename:'build-user.js' //最后生成的文件名 }), // css抽取 new extractTextPlugin("[name].css"), ]};
3.最后执行webpack命令后
这样css就单独抽离出来了
0 0
- 构建登录页面:css提取(不打包到js中)
- JS注入CSS到页面
- webpack2打包vue与Boostrap并进行多页面打包以及公共js部分的提取
- 通过Maven构建打包Spring boot,并将config配置文件提取到jar文件外
- 通过Maven构建打包Spring boot,并将config配置文件提取到jar文件外
- weex将js打包到客户端中
- Html+css+js+jquery实现简单页面登录
- html+css+js实现火影背景切换登录页面
- Smarty从数据库中提取图片显示到页面(实例)
- shiro登录验证(登录跳转到指定页面,验证码验证,不注销之前已登录用户下,再次登录)
- 简单加入Css到页面中
- js,css压缩打包
- js提取页面的图片
- less 强制将css 打包到单个文件中
- less 强制将css 打包到单个文件中
- pentaho中登录页面用不显示下拉框
- 登录到不同页面
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- Cocos3.10绑定自定义类
- Bear and Three Balls
- ViewGoup的布局
- sqlalchemy
- HDU2026首字母变大写
- 构建登录页面:css提取(不打包到js中)
- 畅通工程
- Android sql的数据存储
- 【codeforces 660 A Co-prime Array】
- 标签栏主界面实现(三)
- java内部类
- 调制解调器、中继器、集线器、网桥、交换机、路由、网关
- ssh隧道的理解
- URAL 2069. Hard Rock (分类讨论)