未命名项目

把JS打包成单个文件

const path = require("path");

module.exports = {
    entry: "./app/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
}

打包成多个JS文件

const path = require('path');

module.exports = {

    entry: {
        home: './app/home.js',
        about: './app/about.js'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js" 
    }
}

CSS和JS打包成一个文件

const path = require("path");

module.exports = {
    entry: {
        home: "./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },

    module: {
        rules: [
            {
                test: /\.css$/, 
                use: [
                    //经过查阅资料和自己对css-loader和style-loader的配置才发现,其实css-loader和style-loader在配置文件中的书写顺序是有问题的,我们都知道css-loader会遍历所有的css文件,找到所有的url(...)并进行处理,style-loader则是把所有的样式插入到页面的style标签里面,因此,这个顺序是先加载css-loader再加载style-loader,但是在webpack.config.js文件里面,loader的解析是逆序的,因此要把style-loader写在css-loader的前面;
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

图片和JS打包成一个文件

const path = require("path");

module.exports = {
    entry: {
        home:"./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js", 
    },

    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}
const path = require("path");

module.exports = {
    entry: {
        home:"./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        publicPath:"./dist/"
    },

    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.css$/, 
                use: [
                    //经过查阅资料和自己对css-loader和style-loader的配置才发现,其实css-loader和style-loader在配置文件中的书写顺序是有问题的,我们都知道css-loader会遍历所有的css文件,找到所有的url(...)并进行处理,style-loader则是把所有的样式插入到页面的style标签里面,因此,这个顺序是先加载css-loader再加载style-loader,但是在webpack.config.js文件里面,loader的解析是逆序的,因此要把style-loader写在css-loader的前面;
                    'style-loader',
                    'css-loader'
                ]
            }

        ]
    }
}
const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        home: "./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },

    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use:"css-loader"
                })
            }

        ]
    },

    plugins:[
        new ExtractTextPlugin("home.css")
    ]
}
WebFrontAuto
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。