webpack simple front-end configuration

Every time you create a project with webpack, always a bunch of packages to install, configure a series of file parsing rules, webpack packaging rules, get bored. Internet to find a lot of webpack configuration inside there's a lot of configuration packages are being introduced or abandoned, and was thus summed up a simple configuration, add or modify on the basis of the project according to their own needs can be.

Directory Structure

step

1. First, the project folder into the root directory, create a named srcfile folder in srccreate folder index.htmland main.jsfile
2. Enter the terminal in npm init -yorder to generate initialization package.jsonfile
3. Configuration package.jsonfile
4. Input npm installcommand to install dependencies
5. Create a named .babelrcfile, configuration rules babel
6. Create a file named webpack.config.jsfiles, configure the development environment configuration webpack
7. Create a named webpack.publish.config.jsfile, configuration, release the configuration of webpack

use

• main.jsAs the document inlet, the introduction of the various components and dependencies
• Enter the terminal in npm run devorder to start the local server environment
• Enter the terminal npm run pubproject packaged and released

package.json file configuration

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot",
    "pub": "webpack --config webpack.publish.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
    "@babel/plugin-transform-modules-commonjs": "^7.7.5",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/plugin-transform-strict-mode": "^7.7.4",
    "@babel/preset-env": "^7.7.6",
    "@babel/runtime": "^7.7.6",
    "babel-loader": "^8.0.6",
    "babel-preset-mobx": "^2.0.0",
    "moment": "^2.24.0",
    "node-sass": "^4.13.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.9.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.3.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "webpack-cli": "^3.3.10"
  }
}

.babelrc file configuration

{
    "presets": ["@babel/preset-env", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime",
        ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
    ]
}

webpack.config.js file configuration

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
    ],
    module: {
        rules: [
            {test: /\.css$/,use: [ "style-loader", "css-loader"]},
            {test: /\.scss$/,use: [ "style-loader", "css-loader", "sass-loader"]},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=10000&name=[hash:8]-[name].[ext]'},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, 
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    }
};

webpack.publish.config.js file configuration

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:{
        app: path.join(__dirname,'./src/main.js')
    },
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {test: /\.css$/,use: [ "style-loader", "css-loader"]},
            {test: /\.scss$/,use: [ "style-loader", "css-loader", "sass-loader"]},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=10000&name=images/[hash:8]-[name].[ext]'},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, 
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 10 // 优先级
                },
                common: {
                    name: "common",
                    test: /[\\/]src[\\/]/,
                    minSize: 1024,
                    chunks: "all",
                    priority: 5
                }
            }
        }
    }
};