const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin'); const ROOT_PATH = path.resolve(__dirname); // root directory const APP_PATH = path.resolve(ROOT_PATH, 'app'); // Source file directory const BUILD_PATH = path.resolve(ROOT_PATH, 'build'); Const ExtractTextPlugin = require("extract-text-webpack-plugin"); const px2rem = require('postcss-px2rem'); Module. exports = {entry: {// entry, default index.js app:APP_PATH, vendor: ['jquery','react','react-dom']// output: {// output configuration path: BUILD_PATH, publicPath: "./", filename: 'bundle.js'}, plugins: [new CleanPlugin (' build '), / / empty bulid new webpack. Optimize the UglifyJsPlugin ({compressor: {warnings: false,}, except: ['$super', 'Copy the code

, ‘exports’,’ require ‘] / / remove keyword}), new webpack. Optimize the OccurenceOrderPlugin (), new HtmlWebpackPlugin ({template: APP_PATH+’\\index.html’, inject: ‘true’ }), new ExtractTextPlugin(“styles.css”), new webpack.DefinePlugin({ ‘process.env’:{ ‘NODE_ENV’: Json.stringify (‘production’)}}), new webpack.providePlugin ({// provide global $: “jquery”, jquery: “jquery”, “window.jQuery”:”jquery”, React:”react”, ReactDom:”react-dom” }), New webpack.optimize.Com monsChunkPlugin (‘ vendor ‘, ‘vendor. Bundle. Js), / / vendor packaging] from the entrance, postcss: () => { return [px2rem({remUnit: 64})]; Px2rem}, module: {loaders: [{// compress and px2rem test: /\.css$/, loader: ExtractTextPlugin. Extract (‘ style! CSS! Postcss ‘)}, {/ / less compile and add prefix test: / \. Less /, loader: ExtractTextPlugin. Extract (‘ CSS! Autoprefixer! Less ‘)}, {/ / JSX compile test: / \. JSX? $/, exclude: /(node_modules|bower_components)/, loader: ‘babel’, query: { presets: [‘react’, ‘es2015′]},}, {attrs=img: SRC;} Attrs =img: SRC img:data-src SRC = test: /\.html$/, loader: “HTML?-minimize&attrs=img: SRC img:data-src”}, {// /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: // fonts/[name].[ext]’}, { Will be less than the image of xxxbyte into base64 code test: / \. (PNG | JPG | GIF) $/, loader: ‘url – loader? Limit = 8192 & name =. / img / [name] [ext]’}, {test: /\.json$/, loader: ‘file-loader?name=./[name].[ext]’ }] } }

Ps: Notes may be inaccurate, I hope to inquire about it

Productbox.jsx // This is a code I saw while learning ReactJS online and made some changes

class Comment extends React.Component {
    render() {
        return (
            
      

                
       

        
                    {this.props.children}
                
       
                
       

        
                    - {this.props.author}
                
       
            
      
        );
    }
}

class CommentForm extends React.Component {

    handleSubmit(e) {
        e.preventDefault();
        const author = this.refs.author.value.trim();
        const body = this.refs.body.value.trim();
        const form = this.refs.form;

        this.props.onSubmit({author: author, body: body});

        form.reset();
    }

    render() {
        return (
             {this.handleSubmit(e)}}>
                
                
                
            
        );
    }
}


class CommentList extends React.Component {

    render() {
        var commentsNode = this.props.comments.map((comment, index) => {
            return {comment.body}
        });
        return (
            
      

       
                {commentsNode}
            
      
); } } class CommentBox extends React.Component { constructor(props) { super(); this.state = { comments: props.comments || [] }; } loadDataFromServer() { $.ajax({ url: this.props.url, dataType: "json", success: comments => { this.setState({comments: comments}); }, error: (xhr, status, err) => { console.log(err.toString()); }}); } componentDidMount() { this.loadDataFromServer(); } handleNewComment(comment) { const comments = this.state.comments; const newComments = comments.concat([comment]); this.setState({comments: newComments}); setTimeout(() => { $.ajax({ url: this.props.url, dataType: "json", type: "POST", data: comment, success: comments => { this.setState({comments: comments}); }, error: (xhr, status, err) => { console.log(err.toString()); this.setState({comments: comments}); }}); }, 2000); } render() { return (
      

                
       
Comments
                
                 this.handleNewComment(comment)}/>
            
      
); }} let box = ReactDom. Render (// ReactDom = ReactDom) Document.getelementbyid ('content'));Copy the code

• [x] CSS pX2REM, and compressed CSS
• [x] JS compression obfuscation, modular
• [x] Automatically adds js, CSS references to HTML
• [x] Base64 for automatic conversion less than 8K

• [] Generate more than 8K image data with audio list combined with preloading

• [x] Modify code to compile automaticallynpm run watch

The public,

Our home page