webpack - Githubissues

leibnizli commented 8 years ago

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = [{
    name: "develop",
    entry: {
        user: "./src/user.js"
        //goods:"./src/goods.js",
    },
    output: {
        path: __dirname,
        filename: "./build/[name].bundle.js"
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./build/[name].bundle.css",
            allChunks: true
        })
    ],
    module: {
        loaders: [{
            test: /\.css$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: "css-loader"
            })
        }, {
            test: /\.(png)$/,
            // inline base64 URLs for <=8k images, direct URLs for the rest
            loader: 'url-loader?name=images/[name].[ext]&limit=100000'
        }, {test: /\.jpg$/, loader: "file-loader?name=images/[name].[ext]"}]
    }
}, {
    name: "build",
    entry: {
        user: "./src/user.js"
        //goods:"./src/goods.js",
    },
    output: {
        path: __dirname,
        filename: "./build/[name].bundle.min.js"
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./build/[name].bundle.min.css",
            allChunks: true
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [{
            test: /\.css$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: "css-loader"
            })
        }, {
            test: /\.(png)$/,
            // inline base64 URLs for <=8k images, direct URLs for the rest
            loader: 'url-loader?name=images/[name].[ext]&limit=100000'
        }, {test: /\.jpg$/, loader: "file-loader?name=images/[name].[ext]"}]
    }
}]

leibnizli commented 8 years ago

{
  "name": "credit-cloud",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mustache": "^2.2.0"
  },
  "devDependencies": {
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta"
  }
}

leibnizli commented 8 years ago

react

var webpack = require("webpack");
module.exports = [{
    name: "develop",
    entry: "./src/entry.js",
    output: {
        path: __dirname,
        filename: "/build/bundle.js"
    },
    module: {
        loaders: [
            //{ test: /\.css$/, exclude: /node_modules/,loader: "style!css" },
            //{ test: /\.js|jsx$/, exclude: /node_modules/, loaders: ['babel'] }

            {
                test: /\.js|jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel', // 'babel-loader' is also a legal name to reference
                query: {
                    presets: ['es2015']
                }
            }

        ]
    }
}, {
    name: "build",
    entry: "./src/entry.js",
    output: {
        path: __dirname,
        filename: "/build/bundle.min.js"
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [{
                test: /\.js|jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel', // 'babel-loader' is also a legal name to reference
                query: {
                    presets: ['es2015']
                }
            }

        ]
    }
}]

leibnizli commented 8 years ago

添加自动合并图片

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var SpritesmithPlugin = require('webpack-spritesmith');
var autoprefixer = require('autoprefixer');
var templateFunction = function (data) {
    var shared = '.ui-ico { background-image: url(I) }'
        .replace('I', data.sprites[0].image);

    var perSprite = data.sprites.map(function (sprite) {
        return '.ui-ico-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
            .replace('N', sprite.name)
            .replace('W', sprite.width)
            .replace('H', sprite.height)
            .replace('X', sprite.offset_x)
            .replace('Y', sprite.offset_y);
    }).join('\n');

    return shared + '\n' + perSprite;
}

module.exports = [{
    name: "develop",
    entry: {
        user: "./src/user.js"
        //goods:"./src/goods.js",
    },
    output: {
        path: __dirname,
        filename: "./build/[name].bundle.js"
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./build/[name].bundle.css",
            allChunks: true
        }),
        //合并图片
        // new SpritesmithPlugin({
        //     src: {
        //         cwd: path.resolve(__dirname, 'src/images/icon'),
        //         glob: '*.png'
        //     },
        //     target: {
        //         image: path.resolve(__dirname, 'src/sprites/sprite.png'),
        //         css: [
        //             [path.resolve(__dirname, 'src/sprites/sprite.css'), {
        //                 format: 'function_based_template'
        //             }]
        //         ]
        //
        //     },
        //     apiOptions: {
        //         cssImageRef: "sprite.png"
        //     },
        //     spritesmithOptions: {
        //         padding: 20
        //     },
        //     //自定义模板
        //     customTemplates: {
        //         'function_based_template': templateFunction
        //     },
        // })
    ],
    module: {
        //提取css
        loaders: [{
            test: /\.html$/,
            loader: "html"
        }, {
            test: /\.css$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: "css-loader!postcss-loader"
            })
        }, {
            test: /\.(png)$/,
            // inline base64 URLs for <=8k images, direct URLs for the rest
            loader: 'url-loader?name=images/[name].[ext]'
        }, {test: /\.jpg$/, loader: "file-loader?name=images/[name].[ext]"}]
    },
    postcss: function () {
        return [autoprefixer];
    }
}, {
    name: "build",
    entry: {
        user: "./src/user.js"
        //goods:"./src/goods.js",
    },
    output: {
        path: __dirname,
        filename: "./build/[name].bundle.min.js"
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "./build/[name].bundle.min.css",
            allChunks: true
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    module: {
        loaders: [{
            test: /\.html$/,
            loader: "html"
        }, {
            test: /\.css$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: "css-loader!postcss-loader"
            })
        }, {
            test: /\.(png)$/,
            // inline base64 URLs for <=8k images, direct URLs for the rest
            loader: 'url-loader?name=images/[name].[ext]'
        }, {test: /\.jpg$/, loader: "file-loader?name=images/[name].[ext]"}]
    },
    postcss: function () {
        return [autoprefixer];
    }
}]

{
  "name": "credit-cloud",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "mustache": "^2.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "postcss-loader": "^0.10.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta",
    "webpack-spritesmith": "^0.2.6"
  }
}

leibnizli commented 7 years ago

require.ensure(["./lib/fundCity.json"], function(require) {
    var area = require("./lib/fundCity.json");
});

build

var webpack = require('webpack');
var path = require('path');
module.exports = [{
    name: "production",
    entry: {
        common: "./src/common.js",
        common2: "./src/common2.js",
        user: "./src/user.js",
        index:"./src/index.js",
        auth:"./src/auth.js"
    },
    //devtool: "#inline-source-map",
    output: {
        path: 'build/',
        publicPath: "build/",
        filename: "[name].bundle.min.js",
        chunkFilename: "[name].ensure.min.js"//给require.ensure用
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin({
        //     compress: {
        //         warnings: false
        //     }
        // })
    ],
    module: {
        loaders: [{
            test: /\.json$/,
            loader: "json"
        },{
            test: /\.html$/,
            loader: "html"
        },{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.(png)$/,
            // inline base64 URLs for <=8k images, direct URLs for the rest
            loader: 'url-loader?name=images/[name].[ext]&limit=8192'
        }, {
            test: /\.jpg$/,
            loader: "file-loader?name=images/[name].[ext]&limit=8192"
        }]
    }
}]

leibnizli / leibnizli.github.com

webpack #3