Udemy에서 webpack을 하루에 습득! 수강
2467 단어 Udemy 학습 응원udemywebpack
Udemy에서 webpack 배우기
Udemy를 이용하여 webpack을 배웠습니다.
수강하려고 한 동기는 wordpress의 오리지널 테마를 만들려고 생각하고 bootstrap을 사용하려고하면 아무래도 sass를 사용하는 것이 좋을 것 같다.
그렇지만 사용해도 gulp라든지의 태스크 러너를 배우는 것도 생각했습니다만, React등도 향후 사용하면 webpack이 좋다고 하는 것으로 이것을 학습했습니다.
배운 것
이 코스에서 배우는 내용으로서는 아래의 webpackconfig.js 파일을 보면 부감할 수 있습니다.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const outputPath = path.resolve(__dirname, 'dist');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: outputPath,
},
module: {
rules: [
{
enfore: 'pre',
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loader: 'url-loader',
options: {
limit: 2048,
name: './images/[name].[ext]',
},
},
{
test: /\.html$/,
loader: 'html-loader',
},
],
},
devServer: {
contentBase: outputPath,
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
}),
],
optimization: {
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
},
}),
new OptimizeCSSAssetsPlugin({}),
],
},
devtool: 'eval-source-map',
};
배우고 싶었던 sass의 사용법도 배울 수 있었습니다.
마지막으로는 react의 환경 이렇게 배울 수 있었으므로 이번에, 시간이 생기면 react에도 도전하려고 합니다.
Reference
이 문제에 관하여(Udemy에서 webpack을 하루에 습득! 수강), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nakamoto_yuki/items/74ab7a6004c5ce9af046
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이 코스에서 배우는 내용으로서는 아래의 webpackconfig.js 파일을 보면 부감할 수 있습니다.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const outputPath = path.resolve(__dirname, 'dist');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: outputPath,
},
module: {
rules: [
{
enfore: 'pre',
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.(sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
loader: 'url-loader',
options: {
limit: 2048,
name: './images/[name].[ext]',
},
},
{
test: /\.html$/,
loader: 'html-loader',
},
],
},
devServer: {
contentBase: outputPath,
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
}),
],
optimization: {
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
},
},
}),
new OptimizeCSSAssetsPlugin({}),
],
},
devtool: 'eval-source-map',
};
배우고 싶었던 sass의 사용법도 배울 수 있었습니다.
마지막으로는 react의 환경 이렇게 배울 수 있었으므로 이번에, 시간이 생기면 react에도 도전하려고 합니다.
Reference
이 문제에 관하여(Udemy에서 webpack을 하루에 습득! 수강), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakamoto_yuki/items/74ab7a6004c5ce9af046텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)