webpack 打包 css、less

安装相关插件

yarn add css-loader -D

yarn add style-loader -D

yarn add less less-loader -D

webpack.config.js添加modle配置

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports= {
    mode:'development',//production development
    entry:'./src/index.js',//入口
    output:{
        filename:'bundle.[hash:8].js',//打包后的文件名
        path:path.resolve(__dirname,'dist')
    },
    devServer:{
      port:8090,
      progress:true,
      contentBase:'./dist'
    },
    plugins:[
			new HtmlWebpackPlugin({
		template:'./src/index.html',
		filename:'index.html',
		minify:{removeAttributeQuotes:true,//删除属性双引号
		collapseWhitespace:true,//html折叠一行
		minifyJS: true,//压缩HTML中JS
		minifyCSS: true//压缩HTML中CSS
			},
		   hash:true//生成hash戳
	})
	],
	module: {
        rules: [ // 定义css规则,use从下往上顺序执行
            {
                test: /\.css$/, // 正则匹配要识别的css
                use: [
                    {
                        loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
                    },
                    {
                        loader: 'css-loader' // 使用css-loader进行处理
                    }
                ]
               //use:['style-loader','css-loader'] // 此处也可以这样写
            },
			{
				test:/\.less$/,
				use: [
                    {
                        loader: 'style-loader' // 使用style-loader进行处理，位置必须在css-loader前面
                    },
                    {
                        loader: 'css-loader' // 使用css-loader进行处理
                    },
					{
						loader: 'less-loader' //less ——> css
					}
             
			 ]
			}
        ]
    }

}

./css/base.css

html{
   background-image:url('http://www.superstr.work/resource/jogging.jpg');background-size:cover;
}

创建app.js，import css

import './css/base.css';

hello.less

body {
	div {
		border: 1px solid red;
	}
}

index.js

import './app.js';//require('./app.js');
import './hello.less';//require('./hello.less')

let str = require('./a.js');

console.log('hello');
console.log(str);

index.html

<html>
<head>
</head>
<body></body>
</html>

npx webpack

npx webpack-dev-server

访问 localhost:8090/index.html

webpack 打包 css、less

webpack 打包 css、less

相关推荐