使用 Webpack 构建简单站点

Question

我第一次尝试让 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 没有通过，当我把它放在供应商列表中时它也不起作用。

有什么想法吗？

Answer 1

既然您开始了，现在是切换到 Webpack 2 和 https://webpack.js.org/ 文档的好时机，该文档目前处于测试阶段，您可以通过以下方式使用 beta 分发标签安装它：

npm install webpack@beta --save

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

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

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

您应该考虑使用html-webpack-plugin 来生成必要的 HTML 模板，并根据需要在 JS 源中要求其他资源。