/ / webpack úhlový projekt vo výrobe - angularjs, caching, webpack, výroba

webpack úhlový projekt vo výrobe - angularjs, caching, webpack, výroba

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 tu zadajte popis obrázku

================================================== == 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ď č. 1

Ak chcete riešiť svoje dve body:

  1. /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.

  2. 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",
    },