依赖的引入：
cnpm i -D webpack webpack-cli
cnpm i -D file-loader url-loader style-loader css-loader expose-loader
cnpm i -S bootstrap@3 jquery@3
附上package.json 依赖片段
"dependencies": {
"bootstrap": "^3.4.1",
"jquery": "^3.4.0"
},
"devDependencies": {
"css-loader": "^2.1.1",
"expose-loader": "^0.7.5",
"file-loader": "^3.0.1",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
}
webpack.config.js文件的配置如下：
const path = require('path')
module.exports={
mode:'development',
entry:'./src/index.js',
output:{
filename: 'bundle.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
loader: 'url-loader',
options: {
limit: 12000
}
},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: ['url-loader']},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: ['url-loader']
}
]}
}
入口文件/src/index.js
import 'expose-loader?$!jquery'
import 'expose-loader?jQuery!jquery'
import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'
入口网页 /dist/index.html
<body>
<!-- bootstrap的class -->
<button class="btn btn-primary">test</button>
<script src="bundle.js"></script>
</body>
