-
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
미해결
2022년 기준 웹팩 설정하실 때
22.05.13 23:20 작성 조회수 176
0
제 webpack.config.js 입니다 참고하세요
모듈 설정하실 때 js로드 할 babel-loader, css 로드 할 style-loader, css-loader를 설정하시고 플러그인에서 HtmlWebpackPlugin 객체에서 쓸 템플릿을 설정해주세요
그리고 엔트리포인트 js파일에서 css파일을 import하세요
import './index.css 혹은 require('./index.css') 이런 식으로해주세요.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
},
output: {
filename: '[name].entry.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [{
test: /\.m?js$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: ['last 2 versions'],
debug: true
}]
],
plugins: ['@babel/plugin-transform-runtime'],
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]},
// devServer: {
// port: 9000,
// },
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
답변을 작성해보세요.
답변 0