1. Official website: doc.webpack-china.org/

\

2. Overview: WebPack is a module bundler for modern JavaScript applications. When WebPack works with applications, it recursively builds a Dependency graph containing each module the application needs, and then bundles all these modules into a small number of bundles — usually just one — that are loaded by the browser.

\

3. Directory structure

\

\

\

4.config.json

{
  "greetText": "Hello World! 123"
}
Copy the code


\

5.Greeter.css

.root {
    background-color: #eee;
    padding: 10px;
    border: 3px solid #ccc;
    color: #00ad36;
}
Copy the code


6.Greeter.js

import React, {Component} from 'react'
import config from './config.json';
import styles from './Greeter.css';

class Greeter extends Component {
    render() {
        return (
            <div className={styles.root}>
                {config.greetText}
            </div>); }}export default Greeter
Copy the code


7.index.tmpl.html

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Sample Project</title>
</head>
<body>
    <div id="root">
    </div>
</body>
</html>
Copy the code


8.main.css

html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1.h2.h3.h4.h5.h6.p.ul {
    margin: 0;
    padding: 0;
}
Copy the code


\

9.main.js

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

import './main.css';

render(<Greeter/>.document.getElementById('root'));
Copy the code


\

10. The public file and the contents in the file are not created by ourselves, but are automatically generated by Weppack

\

11.  .babelrc

{
  "presets": ["react"."es2015"]."env": {
    "devlopment" : {
      "plugins": [["react-transform", {
        "transforms": [{
          "transforms": "react-transform-hmr"."imports": ["react"]."locals": ["module"[}]}]}}Copy the code


\

Package-lock. json is generated by Webpack itself

\

13.package.json

{
  "name": "mydemo"."version": "1.0.0"."description": ""."main": "index.js"."dependencies": {
    "react": "^" 15.6.1."react-dom": "^" 15.6.1."webpack": "^ 3.5.6." "
  },
  "devDependencies": {
    "autoprefixer": "^" 7.1.4."babel-core": "^ 6.26.0"."babel-loader": "^ 7.1.2." "."babel-plugin-react-transform": "^ 2.0.2"."babel-preset-es2015": "^ 6.24.1"."babel-preset-react": "^ 6.24.1"."css-loader": "^ 0.28.7"."html-webpack-plugin": "^ 2.30.1"."postcss-loader": "^ 2.0.6"."react-transform-hmr": "^" 1.0.4."style-loader": "^ 0.18.2"."webpack-dev-server": "^ 2.7.1." "
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack"."server": "webpack-dev-server --open"
  },
  "author": "xu"."license": "ISC"
}
Copy the code


14.postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')]}Copy the code


\

15.webpack.config.js

const webpack= require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'eval-source-map'.entry: __dirname + "/app/main.js".// The only entry file that has been mentioned several times
    output: {
        path: __dirname + "/public".// Place to store the packed files "+
        filename: "bundle.js"  // Output the file name after packaging
    },
    devServer: {
        contentBase: './public'.historyApiFallback: true.inline: true.hot: true
    },
    module: {
        rules: [{test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader".options: {
                            modules: true}}, {loader: "postcss-loader"}]}]},plugins: [
        new webpack.BannerPlugin(All Rights Reserved.),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" // New an instance of the plugin and pass in the relevant parameters
        }),
        new webpack.HotModuleReplacementPlugin()
    ]
};
Copy the code


\

16. Set up the directory structure above and install Webpack and related plug-ins to run

\

\

\

\

17. You can also download the code project I wrote directly from Github: github.com/xutongbao/m…

\

18. Reference links: www.jianshu.com/p/42e11515c…

\

\

\