使用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没有通过，当我把它放在供应商列表中时它不起作用。

有任何想法吗？

Answer 1

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

 npm install webpack@beta --save 

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

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

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

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