webpack 引入 bootstrap(二)

最新推荐文章于 2021-06-20 23:03:44 发布

weixin_30745553

最新推荐文章于 2021-06-20 23:03:44 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/wyxxj/p/7420338.html

本文详细介绍了如何使用Webpack加载各种资源文件，包括CSS、字体文件等。通过具体的代码示例，展示了如何配置不同类型的加载器（如file-loader和url-loader），以及如何使用html-webpack-plugin等插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，先上代码

因为css文件内还引用了很多类型的字体文件和矢量图文件。要引入它，必须同时提供css之外的类型的对应的loader

cnpm install file-loader url-loader --save-dev

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
	entry: './src/js/index.js',

    output: {
        path: __dirname+'/dist/js',
        filename: '[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js，main-2ea5b2e9b258a8bbba73.js
    },
	module:{
		rules:[
			{
				test:require.resolve('jquery'),
				loader:'expose-loader?$!expose-loader?jQuery'
			},
			{
		      	test: /\.js$/,
				exclude:path.resolve(__dirname, 'node_modules'),
		        loader: 'babel-loader',
		        options: {
		          	presets: ['latest']
		        }
		      	
		    },
		    {
		    	test:/\.less$/,
		    	loader:'style-loader!postcss-loader!less-loader'
		    },
		    { test: /\.css$/, loader: "style-loader!css-loader"},
		    { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
		    { test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" },
		　　 { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
		    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
		]
	},
	plugins:[
		new	htmlWebpackPlugin({
			title:'控件',
			filename:__dirname+'/dist/html/index.html',
			template:__dirname+'/src/html/index.html'
		}),
		new webpack.ProvidePlugin({
			$: "jquery",
      		jQuery: "jquery",
      		'window.$':'jquery',
      		'window.jQuery':'jquery'
		})
	]
}

//index.js

//在js代码中直接引入bootstraps.css,

　require('bootstrap/dist/css/bootstrap.css');

大功告成 bootstraps js和css 都引入到webpack中了

转载于:https://www.cnblogs.com/wyxxj/p/7420338.html