webpack
udemy
Udemy学習応援

Udemyでwebpackを1日で習得!を受講


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にも挑戦しようと思います。