使用Webpack进行简单的站点 [英] Using Webpack for simple site

问题描述

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

I'm trying to get webpack to work for the first time and I'm doing it on a simple website but, no matter what I try, it never works correctly. I've been stuck on it for weeks and I've seriously tried every thread out there to no avail. I just need someone who doesn't have a problem with webpack to look at my code and provide comment on how to get it to work correctly.

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

I have all my source code in the src directory. Libraries and developer dependencies are in the node_modules directory. And I want to run webpack and have it output everything to the dist directory. If I run a server using only the files in the src directory, it works fine but as soon as I run webpack and try to use the files in the dist directory, it all falls apart.

这是webpack.config.js：

Here's 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：

And my entry point is 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');

您怎么看？

- 尝试第一次回答后编辑 -

--edited after trying first answer--

我更新的webpack.config.js：

my updated 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现在是一个空文件。

My index.webpack.js is now an empty file.

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

I'm basically still having the exact same problems as before only I'm using html-webpack-plugin instead of requiring all my files in the entry file.

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

$ is not defined even though I'm defining it with provideplugin.

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

bootstrap css isn't going through and it doesn't work when I put it in the vendors list.

任何想法？

推荐答案

因为你的开始，现在是转换到Webpack 2和 https://webpack.js.org/对于文档，目前处于测试阶段，您可以使用 beta 分发标记通过以下方式安装：

Since your starting out, now would be a good time to switch to Webpack 2 and https://webpack.js.org/ for the documentation, which is currently in beta and you can install it using the beta distribution tag via:

npm install webpack@beta --save

很好，现在深吸一口气，让我们尝试下一点：你必须忘记关于提供原始应用程序源和资产，并始终将Web服务器指向输出目录（或者只使用 webpack-dev-server ）。让我试着解释一下。

Great, now take a deep breath and let's try to get the next point through: you have to forget about serving your raw application sources and assets and always point your web server to the output directory (or simply use webpack-dev-server). Let me try to explain.

Webpack是一个模块捆绑器，它对分发的优化很有帮助，而且几乎所有的功能都依赖于模块加载器。模块加载器的作用是将静态引用带到源或资源，然后生成JS模块。 Oprah show：CSS源代码获取JS模块，PNG获取JS模块，MP3获取JS模块 - 每个人都获得一个模块\ o /。如果您习惯于简单地编写源代码，放弃资源并将Web服务器指向根目录并静态地从HTML中引用它们，这可能会让您失望，因为它不适用于Webpack。

Webpack is a module bundler that agressive on optimization for distribution and almost all of it's features depend on module loaders. What module loaders do is they take your static references to your sources or assets and they produce a JS module. Oprah show: CSS sources get a JS module and PNGs get a JS module and MP3s get a JS module--everyone gets a module \o/. This might trip you up if you're used to simply authoring your sources, dropping in assets and pointing your web server to the root and statically referecing these from HTML, because it won't work with Webpack.

使用 file-loader 这样就不会让你到任何地方，因为你对输出一无所知。记得我说过所有东西都有一个模块，而 file-loader 产生的是一个模块，它将一个字符串输出到输出中的某个资产。所以你要开始做的第一件事就是开始接受那些输出，然后将它们注入到HTML中以获得实际的引用。

Using file-loader like this won't get you anywhere, because you're doing nothing with the output. Remember I said that everything gets a module and what file-loader produces is a module that exports a string to some asset that's in the output. So first thing you have to start doing is start taking those outputs and then inject them into the HTML to get the actual references.

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

You should consider using html-webpack-plugin to produce the necessary HTML template and require other assets as necessary in your JS sources.

这篇关于使用Webpack进行简单的站点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！