Používam úhlový projekt webpacku a úspešne som mohol vygenerovať balík a vložiť ho do súboru index.html.
Ale v prehliadači vidím prídavný WebpackFOLDER na záložke zdroj, ktorá má starý kód, ak nevymažem vyrovnávaciu pamäť prehliadača, nemôžem nájsť najnovší kód. Existujú však generované zväzky a štýly, ale moje stránky dont berú tieto súbory, berú si kód z priečinka webpack.
Prikladám štruktúru priečinkov, ktoré vidímv prehliadači môžete vidieť priečinok zloženia, odkiaľ je kód vykreslený, a tiež priečinok webového priečinka, kde sa posledný kód neaktualizuje, Vďaka
================================================== == Webpack.development.config.js
const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
HtmlWebpackPlugin = require("html-webpack-plugin");
const nodeModulesPath = path.resolve(__dirname, "node_modules");
const buildPath = path.resolve(__dirname,"app/build");
const mainPath = path.resolve(__dirname, "app", "index.js");
const config = {
context:__dirname,
entry: {
app:[
mainPath
],
vendors: ["jquery","angular"]
},
output:{
path:buildPath,
filename:"bundle.min.js",
publicPath: "http://website.oo.com/build/" // development
},
devtool: "source-map",
resolve:{
alias:{
jquery: "jquery/src/jquery"
},
extensions:["",".js",".css",".less",".html"]
},
module:{
loaders:[
{test: /.js$/,loader: "babel-loader",query:{presets: ["es2015"],compact: false},exclude: "/node_modules/"},
{test: /.less$/,loader:ExtractTextPlugin.extract(["css","less"]) },
{test: /.css$/,loader:ExtractTextPlugin.extract(["css"])},
{test: /.html$/,loader: "html?config=otherHtmlLoaderConfig"},
{test: /bootstrap/js//, loader:"imports?jQuery=jquery"},
{test: /.(png|woff|woff2|eot|ttf|svg)$/, loader:"url-loader",query:{limit:100000}},
{test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff"},
{test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader" },
{test: /[/\]node_modules[/\]some-module[/\]index.js$/,loader: "imports?this=>window"}
]
},
plugins: [
new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.AggressiveMergingPlugin({minSizeReduce:1,moveToParents: true}),
new webpack.optimize.UglifyJsPlugin({compress: { warnings: false },comments:false,sourceMap:true,minimize: true}),
new ExtractTextPlugin("style.min.css", { allChunks: true }),
new webpack.optimize.CommonsChunkPlugin("vendors", "vendor.min.js"),
new CleanWebpackPlugin(["app/build"],{verbose: true,dry: false,exclude: ["vendor.min.js"],watch:false}),
new HtmlWebpackPlugin({
title: "Onepoint Global Account",
template:path.join(__dirname,"app","index.html"),
inject: "body"}),
]
};
module.exports = config;
================================================== ====== Package.json
"scripts": {
"local": "webpack-dev-server --content-base app",
"server": "node server",
"build": "set NODE_ENV=production && webpack -d --watch -p --config webpack.development.config.js"
}
Pri spustení projektu používam príkaz "npm run build".
odpovede:
0 pre odpoveď č. 1Ak chcete riešiť svoje dve body:
/build
je v adrese URL kvôli tomuto riadku:publicPath: "http://website.oo.com/build/" // development
tvoj
buildPath
je adresár, z ktorého môžete hosťovať svoje stránky.Máte
webpack.prod.config.js
? Je v poriadku mať iba jeden konfiguračný súbor webového paketu, ale uvedomte si, že máte v prevádzke produkciu (set NODE_ENV=production
, a-p
) s konfiguráciou vývoja. Ak chcete poraziť ukladanie do vyrovnávacej pamäte prehliadača, môžete vo výstupnom súbore špecifikovať hash:output: { ... filename:"bundle.[hash].min.js", },