Webpack安装(2)-打包css、scss、less(包括编译、分离)
2018-01-28 18:40
726 查看
此文接着《Webpack安装(1)-集成Babel》
完整代码详见:https://github.com/lhtzbj12/webpack-demo
1、打包css文件,先使用下面的命令安装css-loader和style-loader
2、需要打包scss,则需要安装node-sass和sass-loader,采用以下命令安装
3、需要打包less,则需要安装less和less-loader,采用以下命令安装
4、在src文件夹里建css、scss、less文件
5、修改src/index.html
6、修改webpack.config.js
7、修改src/main.js,import文件(目前,css代码将打包到bundle.js文件里,因此html里不需要引用css文件)
8、使用npm start命令启动服务(如何之前已启动,则需要关闭)
9、css各文件分离,生成的文件 不嵌入bundle.js,而是放在单独的文件里。使用Extract Text Plugin插件,使用下面的命令安装。
修改webpack.config.js
由于css与js分离,因此,index.html里需要引用css打包生成的的index.css
使用npm run build打包,就可以生成css/index.css文件。
完整的webpack.config.js文件
完整代码详见:https://github.com/lhtzbj12/webpack-demo
1、打包css文件,先使用下面的命令安装css-loader和style-loader
cnpm install --save-dev css-loader style-loader
2、需要打包scss,则需要安装node-sass和sass-loader,采用以下命令安装
cnpm install --save-dev node-sass sass-loader
3、需要打包less,则需要安装less和less-loader,采用以下命令安装
cnpm install --save-dev less less-loader
4、在src文件夹里建css、scss、less文件
/* style1.css */ @charset "utf-8"; .div1{ background: #ff0000;}
/* style2.scss */ @charset "utf-8"; $base-color:#ffff00; .div2{ background: $base-color;}
/* style3.less */ @base-color:#0000ff; .div3{ background: @base-color;}
5、修改src/index.html
<!DOCTYPE html> <html> <head> <title>webpack demo</title> </head> <body> <div class="div1">Hello World 测试css</div> <div class="div2">Hello World 测试scss</div> <div class="div3">Hello World 测试less</div> <script src="bundle.js"></script> </body> </html>
6、修改webpack.config.js
... { test: /\.css$/, use: [ 'style-loader','css-loader'] }, { test: /\.scss$/, use:[ 'style-loader','css-loader','sass-loader'], }, { test: /\.less$/, use:[ 'style-loader','css-loader','less-loader'], } ...
7、修改src/main.js,import文件(目前,css代码将打包到bundle.js文件里,因此html里不需要引用css文件)
import "./style1.css" import "./style2.scss" import "./style3.less"
8、使用npm start命令启动服务(如何之前已启动,则需要关闭)
npm start
9、css各文件分离,生成的文件 不嵌入bundle.js,而是放在单独的文件里。使用Extract Text Plugin插件,使用下面的命令安装。
cnpm install --save-dev extract-text-webpack-plugin
修改webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
plugins: [ new ExtractTextPlugin('css/index.css') ]
{ test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) }, { test: /\.scss$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"sass-loader" }] }) }, { test: /\.less$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"less-loader" }] }) }
由于css与js分离,因此,index.html里需要引用css打包生成的的index.css
<!-- index.html --> <link rel="stylesheet" type="text/css" href="css/index.css">
使用npm run build打包,就可以生成css/index.css文件。
完整的webpack.config.js文件
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, 'src/main.js'), //入口
},
output: {
filename: 'bundle.js', //输出的文件名
path: path.resolve(__dirname, 'build') //输出文件所在的目录
},
devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
},
module: { // 如何处理项目中不同类型的模块
rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
},
{ test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) }, { test: /\.scss$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"sass-loader" }] }) }, { test: /\.less$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"less-loader" }] }) }
]
},
plugins: [ new ExtractTextPlugin('css/index.css') ]
}
相关文章推荐
- 详解webpack分离css单独打包
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- webpack分离css单独打包
- webpack分离css单独打包
- webpack分离css单独打包的方法
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
- 安装webpack和webpack打包(此文转自Henery)
- Webpack 2 视频教程 013 - 自动分离 CSS 到独立文件
- webpack配置:图片处理、css分离和路径问题
- webpack打包编译学习记录
- webpack如何正确分离css
- 【JavaScript】 Webpack安装及文件打包
- webpack的最简单应用,只使用js与css的打包
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- Webpack 入门(一):安装 / 打包 / 命令行
- webpack配置(第五步:less/css篇(url图片篇))
- webpack打包css(style)