webpack的less=>css

把css/less打包在js中
html

    



    

        
这是一段文字，当样式导入时，将会显示不一样的样式
        
这是检测less样式的段落
    
    
    

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了

    
    



    

        
这是一段文字，当样式导入时，将会显示不一样的样式
        
这是检测less样式的段落
    
    
    

结果

image.png

好处：

img

具体可戳 这个插件的github

我们可以进行压缩一下(包括js和css)

webpack -p