Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {
- "name": "webpack4_example",
- "version": "1.0.0",
- "main": "index.js",
- "browserslist": ["last 2 versions"],
- "scripts": {
- "build": "webpack --mode production",
- "watch": "webpack --watch --mode development",
- "start": "webpack-dev-server --open --mode development"
- },
- "devDependencies": {
- "babel-core": "^6.26.3",
- "babel-loader": "^7.1.4",
- "babel-preset-env": "^1.7.0",
- "babel-preset-react": "^6.24.1",
- "babel-preset-stage-2": "^6.24.1",
- "css-loader": "^0.28.11",
- "html-loader": "^0.5.5",
- "html-webpack-plugin": "^3.2.0",
- "mini-css-extract-plugin": "^0.4.0",
- "node-sass": "^4.9.0",
- "postcss-loader": "^2.1.5",
- "prop-types": "^15.6.1",
- "react": "^16.3.2",
- "react-dom": "^16.3.2",
- "sass-loader": "^7.0.1",
- "webpack": "^4.8.3",
- "webpack-cli": "^2.1.3",
- "webpack-dev-server": "^3.1.4"
- }
- }
- const path = require('path');
- const HtmlWebPackPlugin = require('html-webpack-plugin');
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');
- module.exports = {
- entry: './Project1/js/app.jsx', // customized entry point
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: './js/out.js' // generated ./Project1/dist/js/out.js
- },
- watch: true,
- module: {
- rules: [
- {
- test: /.js$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader'
- }
- },
- {
- test: /.html$/,
- use: [
- {
- loader: 'html-loader',
- options: { minimize: true }
- }
- ]
- },
- {
- test: /.(png|jpe?g)/i,
- use: [
- {
- loader: 'url-loader',
- options: {
- name: './img/[name].[ext]',
- limit: 10000
- }
- },
- {
- loader: 'img-loader'
- }
- ]
- },
- {
- test: /.scss$/,
- use: [
- MiniCssExtractPlugin.loader,
- 'css-loader',
- 'postcss-loader',
- 'sass-loader'
- ]
- }
- ]
- },
- plugins: [
- new HtmlWebPackPlugin({
- template: './Project1/index.html', // not sure how to set these sections
- filename: 'index.html'
- }),
- new MiniCssExtractPlugin({
- filename: '[name].css',
- chunkFilename: '[id].css'
- })
- ]
- };
- {
- "presets": ["env", "react", "stage-2"]
- }
Add Comment
Please, Sign In to add comment