├── src
├── styles
│ └── main.scss
├── index.js
├── .DS_Store
├── images
│ └── .DS_Store
└── index.html
├── package.json
└── webpack.config.js
/src/styles/main.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import 'normalize.css'
2 | import './styles/main.scss';
--------------------------------------------------------------------------------
/src/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/annblok/Webpack-Simple/HEAD/src/.DS_Store
--------------------------------------------------------------------------------
/src/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/annblok/Webpack-Simple/HEAD/src/images/.DS_Store
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Title
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "name-project",
3 | "scripts": {
4 | "build": "webpack",
5 | "dev": "webpack serve --env develop"
6 | },
7 | "devDependencies": {
8 | "css-loader": "^6.5.1",
9 | "html-loader": "^3.1.0",
10 | "mini-css-extract-plugin": "^2.5.2",
11 | "sass": "^1.49.0",
12 | "sass-loader": "^12.4.0",
13 | "style-loader": "^3.3.1",
14 | "webpack": "^5.66.0",
15 | "webpack-cli": "^4.9.1",
16 | "webpack-dev-server": "^4.7.3"
17 | },
18 | "dependencies": {
19 | "html-webpack-plugin": "^5.5.0",
20 | "normalize.css": "^8.0.1"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4 |
5 | const devServer = (isDev) => !isDev ? {} : {
6 | devServer: {
7 | open: true,
8 | hot: true,
9 | port: 8080,
10 | }
11 | };
12 |
13 | module.exports = ({develop}) => ({
14 | mode: develop ? 'development' : 'production',
15 | entry: './src/index.js',
16 | output: {
17 | path: path.resolve(__dirname, 'dist'),
18 | filename: 'bundle.js',
19 | clean: true,
20 | },
21 | plugins: [
22 | new HtmlWebpackPlugin({
23 | template: './src/index.html'
24 | }),
25 | new MiniCssExtractPlugin({
26 | filename: './styles/main.css'
27 | })
28 | ],
29 | module: {
30 | rules: [
31 | {
32 | test: /\.(?:ico|png|jpg|jpeg|svg)$/i,
33 | type: 'asset/inline'
34 | },
35 | {
36 | test: /\.html$/i,
37 | loader: 'html-loader'
38 | },
39 | {
40 | test: /\.css$/i,
41 | use: [
42 | MiniCssExtractPlugin.loader, 'css-loader'
43 | ]
44 | },
45 | {
46 | test: /\.scss$/i,
47 | use: [
48 | MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
49 | ]
50 | }
51 | ]
52 | },
53 | ...devServer(develop),
54 | });
--------------------------------------------------------------------------------