BootStrap을 적용하고 싶습니다.

미해결질문
오병권 프로필

css파일 js로 import하는 영상보고 작성해봤는데 적용이 안되서 질문드립니다. 혹시 외부라이브러리는 다른 설정방법이 있나요?

[HTML]

<!DOCTYPE html>

<html lang="ko">

helloworld

ID

PW

E-Mail

Cancle

[bootstrap.js]

import 'bootstrap/dist/css/bootstrap.min.css';

import 'bootstrap';

import 'bootstrap/js/dist/util';

import 'bootstrap/js/dist/dropdown';

[config]

const webpack = require('webpack');

const path = require('path');

const webpackMerge = require('webpack-merge');

const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

const config = {

entry: {

helloworld: path.resolve(dirname, 'src/main/resources/static/js/helloworld.js'),

vendor: ['jquery'],

background: path.resolve(dirname, 'src/main/resources/templates/myStyle.css'),

bootstrap: path.resolve(dirname, 'src/main/resources/static/js/bootstrap.js')

},

output: {

path: path.resolve(dirname, 'src/main/resources/static/dist/js'),

filename: '[name].js'

},

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

use: [{

loader: 'babel-loader',

options: {

presets: [

['es2015', {modules: false}]

]

}

}]

},

{

test: /.css$/,

use: ['style-loader', 'css-loader']

}

]

},

plugins : [

new webpack.ProvidePlugin({

$ : "jquery",

jQuery : "jquery"

}),

    new CommonsChunkPlugin({

name: "vendor"

})

]

};

module.exports = function(env) {

return webpackMerge(config, require(./webpack.${env}.js))

};

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스