把css/less打包在js中
html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<div class="ct">
<p>這是一段文字块蚌，當(dāng)樣式導(dǎo)入時(shí)唤反，將會(huì)顯示不一樣的樣式</p>
<p>這是檢測(cè)less樣式的段落</p>
</div>
<script src="public/final.js"></script>
</body>
</html>
webpack.config.js
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: path.join(__dirname, "src/index.js"),
output: {
path: path.join(__dirname, "public"),
filename: "final.js"
},
module: {
rules: [{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
//編譯方向從右到左less-loader=>css-loader=>style-loader
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}
};
用到插件如下:
"less-loader" // compiles Less to CSS
下面兩個(gè)是使js文件直接可以require css的
"css-loader" // translates CSS into CommonJS
"style-loader" // creates style nodes from JS strings
使用less之前還需要安裝less插件
npm i --save-dev less
把樣式文件less轉(zhuǎn)為css并且單獨(dú)提取出來(lái)（不放置在bundle.js中）
const webpack = require('webpack')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src/index.js"),
output: {
path: path.join(__dirname, "public"),
filename: "final.js"
},
module: {
rules: [{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'less-loader']
})
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
},
plugins: [
new ExtractTextPlugin('style.css')
//if you want to pass in options, you can do so:
//new ExtractTextPlugin({
// filename: 'style.css'
//})
]
}
然后我們生成了一個(gè)單獨(dú)的css文件
image.png
打開(kāi)html
image.png
說(shuō)明需要我們自己在html中引入css了
<html>
<head>
<title>webpack 2 demo</title>
<link rel="stylesheet" href="public/style.css">
</head>
<body>
<div class="ct">
<p>這是一段文字侠讯，當(dāng)樣式導(dǎo)入時(shí)，將會(huì)顯示不一樣的樣式</p>
<p>這是檢測(cè)less樣式的段落</p>
</div>
<script src="public/final.js"></script>
</body>
</html>
結(jié)果
image.png
好處：
img
具體可戳這個(gè)插件的github
我們可以進(jìn)行壓縮一下(包括js和css)
webpack -p
