使用 Webpack 构建简单网站

我第一次尝试让 webpack 工作，并且是在一个简单的网站上进行的，但是无论我尝试什么，它都无法正常工作。我已经坚持了好几个星期了，我认真地尝试了每一条线索，但都无济于事。我只需要一个对 webpack 没有问题的人来查看我的代码并提供有关如何使其正常工作的评论。

我的所有源代码都在 src 目录中。库和开发人员依赖项位于 node_modules 目录中。我想运行 webpack 并将所有内容输出到 dist 目录。如果我仅使用 src 目录中的文件运行服务器，它工作正常，但一旦我运行 webpack 并尝试使用 dist 目录中的文件，它就会崩溃。

这是 webpack.config.js：

var webpack = require('webpack');
var path = require('path');

module.exports = {
context: __dirname + "\\src",
debug: true,
entry: "./index.webpack.js",
output: {
    path: __dirname + "\\dist",
    filename: "index.min.js"
},
module: {
    loaders: [
        {
            test:/\.js$/,
            exclude:/(node_modules)/,
            loader:'babel-loader',
            query: {
                presets:['es2015']
            }
        },
        {
            test:/\.css$/,
            exclude:/(node_modules)/,
            loader:'style-loader!css-loader'
        },
        {
            test:/\.less$/,
            exclude:/(node_modules)/,
            loader:'style-loader!css-loader!less-loader'
        },
        {
            test:/\.(png|woff|woff2|eot|ttf|svg)$/,
            exclude:/(node_modules)/,
            loader: 'url-loader?limit=100000'
        },
        {
            test:/\.(jpe?g|png|gif|svg)$/i,
            exclude:/(node_modules)/,
            loader: 'url?limit=10000!img?progressive=true'
        },
        {
            test:/\.html$/,
            exclude:/(node_modules)/,
            loader: 'html-loader'
        }
    ]
},
plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
]

};

我的入口点是index.webpack.js：

require('file?name=[name].[ext]!./index.html');
require('jQuery');
require('bootstrap');
require('file?name=[name].[ext]!./css/footer.css');
require('file?name=[name].[ext]!./css/header.css');
require('file?name=[name].[ext]!./css/styles.css');
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.eot');
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.svg');
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.ttf');
require('file?name=[name].[ext]!./fonts/HelveticaRounded-Black.woff');
require('file?name=[name].[ext]!./img/butterfly.gif');
require('file?name=[name].[ext]!./img/dr photo.jpg');
require('file?name=[name].[ext]!./img/firefly.gif');
require('file?name=[name].[ext]!./img/footerspikes.gif');
require('file?name=[name].[ext]!./img/mainheaderimage.jpg');
require('file?name=[name].[ext]!./img/mushrooms.gif');
require('file?name=[name].[ext]!./img/teethkids.gif');
require('file?name=[name].[ext]!./img/titlebanner.gif');
require('file?name=[name].[ext]!./refs/footer.html');
require('file?name=[name].[ext]!./refs/header.html');
require('file?name=[name].[ext]!./refs/leftmargin.html');
require('file?name=[name].[ext]!./refs/rightmargin.html');

你怎么认为？

--尝试第一个答案后编辑--

我更新的 webpack.config.js：

var debug = process.env.NODE_ENV !== "production";

var webpack = require('webpack');
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var commonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    context: path.join(__dirname, 'src'),
    debug: true,
    entry: {
        entry: path.join(__dirname, 'src', 'index.webpack.js'),
        vendor: ['jquery', 'bootstrapjs']
    },
    resolve: {
        alias: {
            'jquery': path.join(__dirname, 'node_modules', 'jquery', 'dist', 'jquery.min.js'),
            'bootstrapjs': path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'js', 'bootstrap.min.js')
        }
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "[name].[chunkhash].bundle.min.js"
    },
    module: {
        loaders: [
            {
                test:/\.js$/,
                exclude:/node_modules/,
                include:path.join(__dirname, 'src'),
                loader:'babel-loader',
            },
            {
                test:/\.css$/,
                include:path.join(__dirname, 'src'),
                loader:'style-loader!css-loader'
            },
            {
                test:/\.less$/,
                include:path.join(__dirname, 'src'),
                loader:'style-loader!css-loader!less-loader'
            },
            {
                test:/\.(png|woff|woff2|eot|ttf|svg)$/,
                include:path.join(__dirname, 'src'),
                loader: 'url-loader?limit=100000'
            },
            {
                test:/\.(jpe?g|png|gif|svg)$/i,
                include:path.join(__dirname, 'src'),
                loader: 'url-loader?limit=100000!img?progressive=true'
            },
            {
                test:/\.html$/,
                include:path.join(__dirname, 'src'),
                loader: 'html-loader'
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        inline: true,
        stats: 'errors-only'
    },
    plugins: debug ? [
        new cleanWebpackPlugin(['dist']),
        new htmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'pages', 'index.html'),
            hash: true,
            chunks: 'commons'
        }),
        new webpack.ProvidePlugin({ 
            $: "jquery", 
            jQuery: "jquery",
            jquery: "jquery"
        }),
        new commonsChunkPlugin({
            name: ['commons', 'vendor', 'bootstrap']
        })
    ] : [
        new cleanWebpackPlugin(['dist']),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
        new htmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'pages', 'index.html'),
            hash: true,
            chunks: 'commons'
        }),
        new webpack.ProvidePlugin({ 
            $: "jquery", 
            jQuery: "jquery",
            jquery: "jquery"
        }),
        new commonsChunkPlugin({
            name: ['commons', 'vendor', 'bootstrap']
        })
    ]
};

我的index.webpack.js 现在是一个空文件。

我基本上仍然遇到与以前完全相同的问题，只是我使用 html-webpack-plugin 而不是要求入口文件中的所有文件。

$ 未定义，即使我使用 Provideplugin 定义它。

bootstrap css 没有通过，当我把它放在供应商列表中时它不起作用。

有任何想法吗？

自从您开始使用以来，现在是切换到 Webpack 2 的好时机https://webpack.js.org/ https://webpack.js.org/有关文档，目前处于测试阶段，您可以使用以下命令安装它beta分发标签通过：

npm install webpack@beta --save

太好了，现在深吸一口气，让我们尝试解决下一个问题：您必须忘记提供原始应用程序源和资产，并始终将您的 Web 服务器指向输出目录（或者简单地使用webpack-dev-server）。让我尝试解释一下。

Webpack 是一个模块捆绑器，它积极优化分发，几乎所有功能都依赖于模块加载器。模块加载器的作用是获取对源或资产的静态引用，并生成 JS 模块。 Oprah 秀：CSS 源得到一个 JS 模块，PNG 得到一个 JS 模块，MP3 得到一个 JS 模块——每个人都得到一个模块 \o/。如果您习惯于简单地编写源代码、放入资源并将 Web 服务器指向根目录并从 HTML 静态引用这些内容，这可能会让您陷入困境，因为它不适用于 Webpack。

Using file-loader这样不会让你有任何收获，因为你对输出没有做任何事情。记住我说过一切都有一个模块，什么file-loaderProduces 是一个将字符串导出到输出中的某些资产的模块。因此，您必须开始做的第一件事就是开始获取这些输出，然后将它们注入到 HTML 中以获得实际的引用。

你应该考虑使用html-webpack-plugin https://github.com/ampedandwired/html-webpack-plugin生成必要的 HTML 模板并需要 JS 源中所需的其他资源。