webpack 引入 bootstrap(二)

话不多说，先上代码

因为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中了