把css/less打包在js中
html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<div class="ct">
<p>这是一段文字，当样式导入时，将会显示不一样的样式</p>
<p>这是检测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
下面两个是使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转为css并且单独提取出来（不放置在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'
//})
]
}
然后我们生成了一个单独的css文件
image.png
打开html
image.png
说明需要我们自己在html中引入css了
<html>
<head>
<title>webpack 2 demo</title>
<link rel="stylesheet" href="public/style.css">
</head>
<body>
<div class="ct">
<p>这是一段文字，当样式导入时，将会显示不一样的样式</p>
<p>这是检测less样式的段落</p>
</div>
<script src="public/final.js"></script>
</body>
</html>
结果
image.png
好处：
img
具体可戳这个插件的github
我们可以进行压缩一下(包括js和css)
webpack -p
