npm install --save-dev @babel/core @babel/preset-env babel-loader clean-terminal-webpack-plugin css-loader mini-css-extract-plugin postcss postcss-loader postcss-preset-env sass sass-loader style-loader webpack webpack-cli webpack-dev-server
"scripts": {
"dev": "webpack serve --config webpack/webpack.dev.config.js",
"build": "webpack --config webpack/webpack.prod.config.js"
}src/js/script.js
src/scss/style.scss
Create folder webpack
| // webpack/modules/babel-loader-rule.js | |
| module.exports = { | |
| test: /\.js$/, | |
| exclude: /(node_modules|bower_components)/, | |
| use: { | |
| loader: 'babel-loader', | |
| options: { | |
| presets: [ | |
| ['@babel/preset-env', { targets: "defaults" }] | |
| ] | |
| } | |
| } | |
| }; |
| // webpack/config.js | |
| module.exports = mode => { | |
| const path = require('path'); | |
| const babelLoaderRule = require('./modules/babel-loader-rule'); | |
| const sassLoaderRule = require('./modules/sass-loader-rule')(mode); | |
| return { | |
| host: 'localhost', | |
| port: 9000, | |
| browserList: 'defaults', | |
| entry: './src/js/script.js', | |
| output: { | |
| path: path.resolve(__dirname, '../dist'), | |
| filename: 'bundle.js', | |
| clean: true, | |
| }, | |
| module: { | |
| rules: [ | |
| babelLoaderRule, | |
| sassLoaderRule, | |
| ] | |
| }, | |
| cssFileName: 'bundle.css', | |
| } | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <script src="./dist/bundle.js"></script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <script src="http://localhost:9000/dist/bundle.js"></script> | |
| </body> | |
| </html> |
| // webpack/modules/sass-loader-rule.js | |
| module.exports = mode => { | |
| const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
| const loaders = []; | |
| const styleLoader = { | |
| loader: 'style-loader', | |
| }; | |
| if (mode === 'production') { | |
| loaders.push(MiniCssExtractPlugin.loader); | |
| } else { | |
| loaders.push(styleLoader); | |
| } | |
| const cssLoader = { | |
| loader: 'css-loader', | |
| }; | |
| loaders.push(cssLoader); | |
| const postCssLoader = { | |
| loader: "postcss-loader", | |
| options: { | |
| postcssOptions: { | |
| plugins: [ | |
| [ | |
| "postcss-preset-env", | |
| ], | |
| ], | |
| }, | |
| }, | |
| }; | |
| if (mode === 'production') { | |
| loaders.push(postCssLoader); | |
| } | |
| const sassLoader = { | |
| loader: 'sass-loader', | |
| }; | |
| loaders.push(sassLoader); | |
| return { | |
| test: /\.s[ac]ss$/i, | |
| exclude: /(node_modules|bower_components)/, | |
| use: loaders, | |
| }; | |
| } |
| // webpack/webpack.dev.config.js | |
| const config = require('./config')('development'); | |
| const CleanTerminalPlugin = require('clean-terminal-webpack-plugin'); | |
| module.exports = { | |
| mode: 'development', | |
| devtool: 'eval-cheap-source-map', | |
| devServer: { | |
| inline: true, | |
| hot: true, | |
| publicPath: '/dist/', | |
| compress: true, | |
| port: config.port, | |
| headers: { | |
| "Access-Control-Allow-Origin": "*", | |
| "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", | |
| "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" | |
| }, | |
| noInfo: true | |
| }, | |
| entry: config.entry, | |
| output: config.output, | |
| module: config.module, | |
| plugins: [ | |
| new CleanTerminalPlugin({ | |
| message: `Dev server running on http://${config.host}:${config.port}` | |
| }) | |
| ] | |
| }; |
| // webpack/webpack.prod.config.js | |
| const config = require('./config')('production'); | |
| const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
| const miniCssExtractPlugin = new MiniCssExtractPlugin({ | |
| filename: config.cssFileName | |
| }); | |
| module.exports = { | |
| mode: 'production', | |
| entry: config.entry, | |
| output: config.output, | |
| module: config.module, | |
| plugins: [ | |
| miniCssExtractPlugin | |
| ] | |
| }; |