jquery - 将 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 没有通过，当我将它放入 vendor 列表时它不起作用。

有什么想法吗？

Answer 1

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

npm install webpack@beta --save

太好了，现在深吸一口气，让我们尝试完成下一点:您必须忘记提供原始应用程序源和 Assets ，并始终将您的 Web 服务器指向输出目录(或简单地使用 webpack -开发服务器)。让我试着解释一下。

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

像这样使用 file-loader 不会让你到任何地方，因为你没有对输出做任何事情。请记住，我说过所有东西都有一个模块，file-loader 生成的是一个将字符串导出到输出中的某些 Assets 的模块。因此，您必须开始做的第一件事就是开始获取这些输出，然后将它们注入(inject) HTML 以获取实际引用。

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